Graduation Design Summary (1)-canvas drawing

The graduation project completed by the end of last June has only been summarized so far. There are many things that can be learned and used for reference.

My graduation project is entitled "improvement and design of a path planning algorithm". For specific requirements, see the following table:

Question	Improvement and Design of A Path Planning Algorithm	Type	Graduation Project
Nature	Engineering Design	Source	Combined with scientific research
Restricted Users	1	Selected persons	1
Graduation design tasks and requirements	On a map with obstacles, the area is divided by over-convex extreme points. In the corresponding area, a point is abstracted to correspond to each area and a connected undirected graph is drawn; find the optimal path based on the corresponding weight value and write the corresponding algorithm.
Graduation Project details	1. Learn the theoretical knowledge of the subject, conduct necessary research and consult relevant materials, and write the graduation design opening report; 2. Conduct requirement analysis on the subject, write the requirement analysis manual, then design the system, write the System Design Manual, and complete the specified content: (1) Fitting Curves to simulate obstacles; (2) The area is divided by horizontal tangent Based on the over-convex Extreme Point; (3) regional storage; (4) construct an undirected graph; (5) set the weight and determine the optimal path; (6) verify the effectiveness of this algorithm. 3. Complete system design; 4. Complete the system test; 5. Translation of computer-related foreign documents; 6. Write the Graduation Design Manual.
Requirements for graduation design achievements	One opening report, one task book, one Graduation Design Manual, one software set, and one 3000-word foreign language translation.
Remarks
Selected students

The content I summarized is basically based on the steps in the requirement. The first step is:Canvas drawing.

Canvas is a new element added to HTML5. It can be used to draw images on webpages. Of course, the canvas element is not capable of drawing, and all the painting work must be completed inside JavaScript. The canvas is a rectangular area, and you can control each pixel.

　　

1. Create

Before using the canvas, you must create a canvas element.

<Canvas id = "screen" width = "800" Height = "600"> sourui, your browser does not support canvas </canvas>

If your browser does not support the HTML5 canvas, the words "sougrui, your browser does not support canvas" will appear on the browser. You need to upgrade or change the browser.

After creating the canvas, we need a pen:

var screen  = document.getElementById("screen");var context = screen.getContext("2d");

The getcontext method specifies the parameter 2D, indicating that the canvas object is used to generate a 2D pattern (that is, a plane pattern ). If the parameter is 3D, it indicates that it is used to generate a 3D image (that is, a three-dimensional image). This part is actually called webgl API separately.

2. Drawing Images

　　

Graduation Design Summary (1)-canvas drawing