Detailing Canvas (i)

Canvas label, Canvas's Chinese meaning is "canvas", and its performance in the Web page, but also the role of the canvas.

<canvas width = "Height =" >
    your browser does not support canvas, please upgrade or replace the browser
</canvas>

Some browsers do not support canvas tags, and then see the text message in the Canvas tab.
The default width of the canvas is 300px, and the default height is 150px;
Note: canvas width and height settings to write in the canvas tag, can not be set through the CSS, the width of the CSS set can be seen as scaling, if the scale is too casual, then the Canva on the drawing will be distorted. Therefore, you must set the width and height of the canvas in the canvas label.

to paint on the canvas:
The first step is to get the canvas tag
var canvas = docunment.queryselector ("#platte");
The second step is to set up the canvas drawing environment, which currently supports only the 2d drawing environment.
var palette = Canvas.getcontext ("2d");//2d drawing environment

The computer screen, the origin is in the upper left corner, the y axis is the square, canvas is also the case.
We begin by drawing a simplest line:
Take out the canvas and brush before you start painting

var canvas = docunment.queryselector ("#platte");/canvas
var palette = Canvas.getcontext ("2d");//Brush

When we draw, the pen point is not fixed, will change at any time. Canvas Although not by hand to decide to write point, but there is a way, is moveTo. The function of the moveto is to lift the nib away from the canvas and move to the specified point (i.e. coordinates).

Palette. MoveTo (x,y)/Set pen point

To start drawing, we're going to draw a straight line, using lineTo (x,y), and when we draw the line, the pen point moves to the lineTo position.

  Palette.moveto (50,50);
  Palette.lineto (100,100);

However, only in this way, there is no expected line, because we are missing a step, LineTo painting is actually a "path", itself is not visible, if we want to let it show, we also need to do "painting" operation, using stroke () or Fill (); because we draw a straight line, we use stroke strokes.

  Palette.moveto (50,50);
  Palette.lineto (100,100);
  Palette.stroke ();

Then refresh the page and you can see the line.
In addition, because the canvas drawing process, very consuming resources, so if you want to save system resources, improve efficiency, it is best to draw all the paths, and then fill or stroke.

Palette.moveto (50,50);
 Palette.lineto (100,100);
 Palette.moveto (150,150);
 Palette.lineto (200,200);
 Palette.stroke ();

The default line color is black, and the default line width is 1px;
The line width and line color can be modified by linewidth and strokestyle .
Such as:

<! DOCTYPE html>
 

As you can see, the upper left corner is missing a piece. And by measuring, it can be found that the Red Square is 110px*110px, not 120px*120px; The lines in the canvas have a " midline ", which is located in the absolute center of line, and the strokes of the lines extend to the sides of the centerline. So the 10px is to the inside and the outer sides of each 5px, so it is not difficult to understand why the result is 110px, not 120px. It is for this reason that the upper left corner is taken for granted. Because there is no painting here.

The rest of the horn does not appear missing, because we are in the process of drawing a line, the brush is not raised, the brush is continuous. If we put the paintbrush in a position.

<script>
    var palette = document.queryselector ("#palette"). GetContext ("2d");//Set up the drawing environment
    Palette.moveto ( 100,100);
    Palette.lineto (200,100);
    Palette.moveto (200,100);
    Palette.lineto (200,200);
    Palette.moveto (200,200);
    Palette.lineto (100,200);
    Palette.moveto (100,200);
    Palette.lineto (100,100);
    Palette.linewidth = ten;
    Palette.strokestyle = ' #FF0000 ';
    Palette.stroke ();
</script>
 

You can see that there is a missing angle in each corner.
Back to the first question, if you fix this missing angle. In fact, another reason for this problem is that our path is not closed, at which point the start and focus coincide, but the path itself is not closed. Let's try it, add a closepath();

<script>
    var palette = document.queryselector ("#palette"). GetContext ("2d");//Set up the drawing environment
  Palette.moveto ( 100,100);
    Palette.lineto (200,100);
    Palette.lineto (200,200);
    Palette.lineto (100,200);
    Palette.lineto (100,100);
    Palette.closepath ();
    Palette.linewidth = ten;
    Palette.strokestyle = ' #FF0000 ';
    Palette.stroke ();
</script>
 
Then refresh the page, you can see that the missing angle has disappeared.

The square angle above is sharp, and if we want to be rounded, how do we do it?
At this point, you need to use the lineJoin property, lineJoin means the intersection of lines, there are three property values: Miter (default, sharp angle), bevel (bevel), round (fillet)

<script>
    var palette = document.queryselector ("#palette"). GetContext ("2d");//Set up the drawing environment
    Palette.moveto ( 100,100);
    Palette.lineto (200,100);
    Palette.lineto (200,200);
    Palette.lineto (100,200);
    Palette.lineto (100,100);
    Palette.closepath ();
    Palette.linewidth = ten;
    Palette.strokestyle = ' #FF0000 ';
    Palette.linejoin = "Round";
    Palette.stroke ();
</script>
 

A property similar to LineJoin is LineCap, LineCap has 3 property values: Butt (flat, default), round (circle), Square (square)

In fact, the flat head is the same as the square, the difference is just flat-cut did not reach out so a section. The round head and square head will stretch out to a section, how long this is. Is half the width of the line.
The last thing to note is that the closed path does not have an endpoint, so the closed path does not see the endpoint's style.

Find out about two important methods in canvas:beginpath () and Closepath ();
Beiginpath () Start a new path
Drawing methods in canvas, such as Stroke,fill, are drawn based on all paths after the previous beiginpath.
As follows:

<! 
    DOCTYPE html> 
 
Get the two red lines, not a black line, a red line.
And, careful observation, we will also find that the first line is wider than the second width. This is because each line of the canvas has an infinitely fine centerline, and the width of the line extends from line to side, because the computer is not allowed to be less than 1px graphics, so the width of the extension becomes 2px. Line in canvas aligns the centerline with the starting point of the pixel, rather than the middle point of the pixel. To solve this problem, we align the centerline of the line with the middle point of the pixel, as in this case, the second curve. In addition, for the linewidth>1 line, we can ignore this problem, only when the line width is 1px, the problem is most obvious.
No matter where you use MoveTo to move the brush, as long as you don't beginpath, you are always drawing a path. FillRect and Strokerect, a function that directly paints a separate area, will not interrupt the current path.
If you draw a different graphic than you think, check to see if there is a reasonable

When it comes to Beiginpath, you have to mention Closepath ();
One thing to note is that the Closepath () does not end the path, but rather closes the path, trying to close the entire path with a path from the focus of the current path to the starting point. However, this does not mean that the path after it is the new path. 
As the above example, even if we after the first stroke, add a closepath () will not appear a red and black line, but if we after the first stroke, add a beginpath (), you can get 2
do not attempt to start a new path by closing an existing path, and start a new path, and the previous path will not be closed. 
So open a new path and a closed path where appropriate.