Canvas detailed----Draw lines

<! DOCTYPE Html>
A canvas element can be created, but if you do not set the parameters, it is not displayed on the browser. So you can set some parameters to let the canvas show up. In addition, the width of the canvas can be set within the label, if the width in the CSS, height, in fact, set the width of the canvas display, height. In addition, the height of the inside, the width is not set px, do not need to set these.
How to work with canvas canvas requires the following actions in JavaScript
var Canvas=document.getelementbyid ("Canvas");
var Context=canvas.getcontext ("2d");
First get the canvas canvas, and then in the context of getting contextual environment;
Add the following code to the HTML file
<script type= "Text/javascript" >
Window.onload=function () {
var Canvas=document.getelementbyid ("Canvas");
canvas.width=1024;
Canvas.height=768;//can also set the size of the canvas in either of these ways;
var Context=canvas.getcontext ("2d");
}
</script>
If you want the browser to be incompatible with this canvas when the "browser is not compatible with the word" can be filled in the HTML canvas tag <canvas id= "Canvas" > Browser incompatible </canvas>
can also be set in JS
if (Canvas.getcontext ("2d")) {
var Context=canvas.getcontext ("2d");
} else{
Alert ("Browser not compatible");
}
Now take a look at how to draw a line
Draw a line
Context.moveto (100,100)
Context.lineto (700,700)
Context.stroke ()
Canvas drawing is a state-based drawing
In other words, he first thought about how to draw, set the state, and then draw the graphic, above the MoveTo (). LineTo (), set the drawing state
Represents a segment, MoveTo (x, Y) that represents the beginning of a line (x, y), LineTo (x1,y1) indicates that the end point of the segment is a dot (x1,y1), and the function that is actually drawn is the stroke (), which is used to draw the segment, and finally a line segment is drawn.
You can also set some properties of the line, before the stroke, such as
canvas.linewidth=5; Sets the width of the line canvas.strokestyle= "#eeddcc". or canvas.fillstyle= ""; Sets the style of the line, mainly the color.
Context.moveto (100,100)
Context.lineto (700,700)
Context.lineto (240,340)
Context.stroke ()
This is a line, the starting point is (100,100), Draw (700,700), and then at (700,700) as the starting point, draw to (240340).
If you add a Context.lineto (100,100) to the back, it becomes a triangle.
If we want to color this triangle, we need the following actions
Replace the stroke () with fill ();
Context.moveto (100,100)
Context.lineto (700,700)
Context.lineto (240,340)
Canvas.fillstyle= "#eeddcc".
Context.fill ();
If we add such a sentence at the back;
Context.moveto (100,100);
Context.lineto (367,345);
Context.lineto (798,456);
Context.lineto (100,100);
Context.fillstyle= "RGB (2,100,30)";
Context.fill ();
context.linewidth=5;
Context.strokestyle= "Red";
Context.stroke ();
This is the color of the triangle to give him the edge of the painting, the end result is that the triangle fill color is rgb (2,100,30), the border line color is red;
The above is all about drawing a shape, if you draw two images?
Context.moveto (100,100);
Context.lineto (200,200);
Context.lineto (100,456);
Context.lineto (100,100);
context.linewidth=5;
Context.strokestyle= "RGB (2,100,30)";
Context.stroke ();
Context.moveto (120,100);
Context.lineto (220,200);
Context.strokestyle= "Red";
Context.stroke (); Finally you will find that both images are the color red, why this is the reason???
Because we've all said before that canvas drawing is a state drawing, when the second shape is drawn, the state of the first shape is re-executed once, but the color is executed in the final color. So it's all red, and the thickness of the line is the same.
Also note that if the above is set to fill, the following is set to draw the line, how is not the same. Watch out.
In the end we set the size of the canvas, and the width of the line is not added PX; watch it, Leo!
So how do we draw two and image and set their different attributes Ah.
At this time we have to add a sentence context.beginpath () before the beginning of the path, and add a sentence of Context.closepath () after the end;
This way the path between the two sentences will only be executed in the following recent drawing, and the following drawing below will not be executed.
context.linewidth=5;
Context.beginpath ();
Context.moveto (120,100);
Context.lineto (220,200);
Context.closepath ();
Context.strokestyle= "Red";
Context.stroke ();
Context.beginpath ();
Context.moveto (100,100);
Context.lineto (200,200);
Context.lineto (100,456);
Context.lineto (100,100);
Context.closepath ();
Context.strokestyle= "RGB (2,100,30)";
Context.stroke ();
The results are shown below
Canvas detailed----Draw lines