Canvas drawing Detailed notes (i)

Statement: Here I will not use too much text to explain what canvas is, I believe that the people who know the canvas know its charm, if you are more unfamiliar with the canvas, suggest you can consult the relevant information to understand. Here I will take a detailed note of the canvas drawing in detail, so that everyone and yourself can learn later. Then the next step is to go directly into the note content of the study:

To create a canvas element first, we only need to include this code in the HTML file:

<id= "Canvas"> Current browser does not support canvas, please change browser use! </ Canvas >

At the same time, we can set the canvas canvas size by the canvas's Tag property width and Height:

<id= "Canvas"  width= " $" height= " $" > The current browser does not support canvas, please change the browser to use! </ Canvas >

Of course, we can also use JS to set the canvas width, the following will refer to how to set.

Next we get the canvas element in JS, then set its width height and get to the context of the environment:

var canvas = document.getElementById ("Canvas"); // get to the canvas element // Set width height canvas.width =n = var context = Canvas.getcontext ("2d"); // Gets the context of the environment

Next, all of our operations are based on the context of this environment.

Now draw a simple line:

Context.moveto (100,100); Context.lineto (500,500);

The MoveTo () method represents the start coordinate of a drawing, and LineTo () represents a straight-line connection between the last coordinate point and the coordinate point.

Note that the canvas is a state-based drawing, not an object-based drawing. So, the above code is the state setting, and we need to draw using the stroke () method:

Context.stroke (); // Drawing

In addition, we can also set some basic properties of the line:

Context.linewidth = 8; // the width of the line Context.strokestyle = "#333"; // the color of the line

A simple complete example of drawing a line:

varCanvas = document.getElementById ("Canvas");//get to the canvas element//Set Width heightCanvas.width = 800; Canvas.height= 800;varContext = Canvas.getcontext ("2d");//Gets the context of the environment//Canvas is a state-based drawing, not an objectContext.moveto (100,100); Context.lineto (500,500); Context.linewidth= 8;//the width of the lineContext.strokestyle = "#333";//the color of the lineContext.stroke ();//Drawing

Running results such as:

Next we draw a continuous polyline:

Context.moveto (100,100); Context.lineto (500,100); Context.lineto (500,500); Context.lineto ( 100,500);

The results of the operation are as follows:

If we want this polyline to be closed to form a rectangle, we can set the Context.lineto (100,100) again, but if the line width is larger, there will be some flaws, so let's try it out for ourselves. So the standard words should use Context.closepath (); This knowledge point will be discussed later, here you can first try to see how the results of the operation.

In this simple example, we are continuously drawn polylines, which means that we can draw a continuous line of finished lines. If there are multiple discontinuous polylines, then we need to use Context.moveto () to redraw the starting coordinates of a polyline:

Context.moveto (100,200); Context.lineto (300,400); Context.lineto (100,600); Context.moveto ( 300,200); Context.lineto (500,400); Context.lineto (300,600); Context.moveto ( 500,200); Context.lineto (700,400); Context.lineto (500,600);

The results of the operation are as follows:

At this point, what if the three polylines we want to draw are different colors? One common mistake to use is:

Context.moveto (100,200); Context.lineto (300,400); Context.lineto (100,600); Context.linewidth= 8; Context.strokestyle= "Red"; Context.stroke ();//DrawingContext.moveto (300,200); Context.lineto (500,400); Context.lineto (300,600); Context.linewidth= 8; Context.strokestyle= "Green"; Context.stroke ();//DrawingContext.moveto (500,200); Context.lineto (700,400); Context.lineto (500,600); Context.linewidth= 8; Context.strokestyle= "Blue"; Context.stroke ();//Drawing

The result will be three lines are blue. Because the Strokestyle property of the second polyline here overrides the Strokestyle property of the first polyline, the execution of the stroke () method draws the current state, so the first polyline turns green. In the same vein, the final three lines are all blue. So, here you need to use the Beginpath () method to re-create a new drawing.

Context.linewidth = 8;//the width of the lineContext.beginpath (); Context.moveto (100,200); Context.lineto (300,400); Context.lineto (100,600); Context.strokestyle= "Red"; Context.stroke ();//DrawingContext.beginpath (); Context.moveto (300,200); Context.lineto (500,400); Context.lineto (300,600); Context.strokestyle= "Green"; Context.stroke ();//DrawingContext.beginpath (); Context.moveto (500,200); Context.lineto (700,400); Context.lineto (500,600); Context.strokestyle= "Blue"; Context.stroke ();//Drawing

Here, each time you draw a polyline, use the Beginpath () method to make a completely new path drawing. When you draw using the stroke () method At this point, only the state below the Beginpath () method is drawn. The results of the operation are as follows:

From the above code we can see: Context.linewidth = 8; placed first, because the Beginpath () method does not change properties that are not modified to default values. For example, here linewidth, three lines are 8, then we put in front, when the stroke () method to draw, will use LineWidth = 8, to draw. The properties that need to be modified are modified in the specific path drawing, such as the line color properties, and the color of each polyline is different, so it needs to be set separately.

Another point is that the MoveTo () method in this code can be changed to the LineTo () method:

Context.linewidth = 8; // the width of the line Context.beginpath (); Context.lineto (100,200); Context.lineto (300,400); Context.lineto ( 100,600= "Red"; Context.stroke (); // Drawing

Because the Beginpath () method is used, the previously drawn path is emptied, but not back to the (0,0) origin. So here we use the LineTo () method as well to draw the starting point, but must be used in conjunction with the Beginpath () method to replace the MoveTo () method.

The Context.closepath () method is described briefly above, and here is a detailed introduction: The Context.closepath () method is used with the Context.beginpath () method to draw a closed path graph, This is the standard practice for drawing closed polygons. and using the Context.closepath () method, the last line's drawing can be omitted, and it automatically connects us to the drawing start to form a closed polygon.

Context.beginpath (); Context.moveto (100,100); Context.lineto (500,100); Context.lineto ( 500,500); Context.lineto (100,500= 8= "#333"; Context.stroke ();

The results of the operation are as follows:

Next we introduce the Fill property FillStyle and fill drawing method Fill ():

Context.beginpath (); Context.moveto (100,100); Context.lineto (500,100); Context.lineto ( 500,500); Context.lineto (100,500= 8= "#333"= "Red";   // Fill Color // Fill

The last two lines of code are set the fill color (red) and the color fill for the closed shape, and the result is as follows:

You can see that the border width of the graphic is smaller than the border width of the shape without the fill color, because we first draw the border and then fill the color. Instead, fill in the color first, and then draw the border. and the Fill () method is the same as the stroke () method, and is drawn based on the current state. So, for readability, we can put property settings together and finally use the fill () and Stroke () methods:

Context.beginpath (); Context.moveto (100,100); Context.lineto (500,100); Context.lineto ( 500,500); Context.lineto (100,500= 8= "#333"= "Red"// fill First  // Draw Border again

The results of this operation:

As you can see, the result is right this time.

This is very common for drawing rectangles, so we can encapsulate them into functions for later invocation:

DrawRect (context,100,100,400,400,8, "#333", "Blue"); function DrawRect (cxt,x,y,width,height,borderwidth,bordercolor,fillcolor) {    cxt.beginpath ();    Cxt.moveto (x, y);    Cxt.lineto (x+width,y);    Cxt.lineto (x+width,y+height);    Cxt.lineto (x, y+height);    Cxt.closepath ();     = borderWidth;     = bordercolor;     = FillColor;    Cxt.fill ();     Cxt.stroke (); }

Similarly, the result of the operation is normal:

However, the canvas API provides a more convenient way to draw rectangles: the Rect () method is used to plan the path of the rectangle, the FillRect () method fills the rectangle's color after planning the path to the rectangle, and the Strokerect () method draws the rectangle's border.

So the above function, if using the Context.rect () method, can be simplified to:

function DrawRect (cxt,x,y,width,height,borderwidth,bordercolor,fillcolor) {    cxt.beginpath ();    Cxt.rect (x,y,width,height);    Cxt.closepath ();     = borderWidth;     = bordercolor;     = FillColor;     // Populate first    // draw Border again }

The use of FillRect () and Strokerect () can be implemented in a much simpler way:

function DrawRect (cxt,x,y,width,height,borderwidth,bordercolor,fillcolor) {    = borderWidth;     = bordercolor;     = FillColor;    Cxt.fillrect (x,y,width,height);    Cxt.strokerect (x,y,width,height);}

At this point, if we draw two rectangles:

DrawRect (context,100,100,400,400,8, "#333", "Blue");d rawrect (context,300,300,400,400,8, "#333", "Red");

The result of the operation is this:

As you can see, the rectangle that is drawn after it is drawn on top of the rectangle before it, of course, the color is different to reflect.

At this point we'll change the fill color of the second rectangle:

DrawRect (context,300,300,400,400,8, "#333", "Rgba (255,0,0,0.5)");

The results are as follows:

You can see that the fill color of the second rectangle is translucent red. Then you need to explain: the color values of the FillStyle and Strokestyle properties can be any of the forms supported by CSS3:

#ffffff #333redrgb (0,0,0) Rgba (255,0,0,0.5) HSL (20,50%,50%) Hsla (20,50%,60%,0.6)

OK, the above is the canvas drawing detailed notes (a) of the entire content! Not to be continued ...

Canvas drawing Detailed notes (i)