Study NOTE: HTML5 Canvas drawing Simple graphics

　HTML5 Canvas to draw simple graphics

1. Add the canvas tag and add the ID for JS operation.

    <id= "MyCanvas"  height= "  width=" 1024 "  style= "border:1px solid #aaa; text-align:center;" >     Your browser does not support canvas, please update your browser and try again!!!     </ Canvas >

Between the canvas label should do browser support whether the detection, if the browser support canvas, the label between the end of the text will be directly ignored. Of course, the actual work should be more than just a simple hint.

2. Get the context, call MoveTo (), lineTo (), stroke () method to draw the line. 　　

varCanvas =document.getelementbyid ("MyCanvas"); //canvas.height=700;            //canvas.width=1024;            varContext=canvas.getcontext ("2d");//2d Canvas            if(!context) {Alert ("Your browser does not support canvas, please update your browser and try again!!!" "); return; } Context.moveto (100,100);//Brush StartContext.lineto (500,500);//from the last point that will be drawncontext.linewidth=3;//line widthContext.strokestyle= "Red";//Line Color            //Canvas Drawing is state-based, and the code above simply defines what the canvas will draw            //so the code executes here, no elements are actually drawn on the canvasContext.stroke ();//Start Drawing

View Code

Tips

Defining the width of the canvas can be set directly in the HTML element via the Height,width property, or in JS through the Canvas object properties, rather than through CSS settings.

The definition of coordinates in the computer, the upper-right corner is the origin (0,0), the horizontal right x increases (x,0), and the vertical downward y increases (0,y).

3. Next, draw a simple triangle

Context.moveto (100,100);//Brush StartContext.lineto (500,500);//from the last point that will be drawnContext.lineto (100,500);//from the last point that will be drawnContext.lineto (100,100);//from the last point that will be drawncontext.linewidth=3;//line widthContext.strokestyle= "Red";//Line Color            //Canvas Drawing is state-based, and the code above simply defines what the canvas will draw            //so the code executes here, no elements are actually drawn on the canvasContext.stroke ();//Start Drawing

Draw Triangles

Tips

As long as our last point is the same as the origin coordinates, we can simply give a closed polygon.

4.closePath () draw closed polygons

Before we learned to draw closed polygons in the same way as starting point coordinates, we can also draw closed polygons using Closepath ().

Context.moveto (100,100);//Brush StartContext.lineto (500,500);//from the last point that will be drawnContext.lineto (100,500);//from the last point that will be drawn            //Context.lineto (100,100);//end point to be drawn from the previous pointcontext.linewidth=3;//line widthContext.strokestyle= "Red";//Line ColorContext.closepath ();//Closed Path            //Canvas Drawing is state-based, and the code above simply defines what the canvas will draw            //so the code executes here, no elements are actually drawn on the canvasContext.stroke ();//Start Drawing

View Code5. Draw multiple graphs continuously.

Next we'll draw a black line next to the red triangle. The code is as follows:

Context.moveto (100,100);//Brush StartContext.lineto (500,500);//from the last point that will be drawnContext.lineto (100,500);//from the last point that will be drawnContext.lineto (100,100);//from the last point that will be drawncontext.linewidth=3;//line widthContext.strokestyle= "Red";//Line Color            //Canvas Drawing is state-based, and the code above simply defines what the canvas will draw            //so the code executes here, no elements are actually drawn on the canvasContext.stroke ();//Start Drawing            //Second graphicContext.moveto (200,100);//Brush StartContext.lineto (600,500); Context.strokestyle= "#000";//Line ColorContext.stroke ();//Start Drawing

Draw multiple Shapes 1

What have we found? The two graphs did come out, but they did not tint the color I specified.

As mentioned previously, the canvas drawing is state-based, so the strokestyle= "#000" is applied to the first triangle when the stroke () is called the second time. At this point we need to use the Beginpath () method.

Context.moveto (100,100);//Brush StartContext.lineto (500,500);//from the last point that will be drawnContext.lineto (100,500);//from the last point that will be drawnContext.lineto (100,100);//from the last point that will be drawncontext.linewidth=3;//line widthContext.strokestyle= "Red";//Line Color            //Canvas Drawing is state-based, and the code above simply defines what the canvas will draw            //so the code executes here, no elements are actually drawn on the canvasContext.stroke ();//Start Drawing            //Second graphicContext.beginpath ();//indicates that a new path drawing is about to beginContext.moveto (200,100);//Brush StartContext.lineto (600,500); Context.strokestyle= "#000";//Line ColorContext.stroke ();//Start Drawing

Draw multiple Shapes 2

6. Draw the Fill shape using the Fill () method. 　

Context.moveto (100,100);//Brush StartContext.lineto (500,500);//from the last point that will be drawnContext.lineto (100,500);//from the last point that will be drawnContext.lineto (100,100);//from the last point that will be drawncontext.linewidth=3;//line widthContext.strokestyle= "Red";//Line Color            //Canvas Drawing is state-based, and the code above simply defines what the canvas will draw            //so the code executes here, no elements are actually drawn on the canvasContext.stroke ();//Start DrawingContext.fillstyle= "green";//Fill ColorContext.fill ();//Start filling            //Second graphicContext.beginpath ();//indicates that a new path drawing is about to beginContext.moveto (200,100);//Brush StartContext.lineto (600,500); Context.strokestyle= "#000";//Line ColorContext.stroke ();//Start Drawing

draw a Fill shape

7. Semi-Finished product expansion Demo

　　　　

your browser does not support canvas, please update your browser and try again!!! </canvas> <script type= "Text/javascript" >functiononload () {varCanvas =document.getelementbyid ("MyCanvas"); //canvas.height=700;            //canvas.width=1024;            varContext=canvas.getcontext ("2d");//2d Canvas            if(!context) {Alert ("Your browser does not support canvas, please update your browser and try again!!!" "); return; }            varpaths=[{path:[{x:0,y:0}, {x:200,y:200}, {x:0,y:400}], fill:"#005588"},{path:[{x:0,y:0}, {x:200,y:200}, {x:400,y:0}], fill:"Green"},{path:[{x:0,y:400}, {x:400,y:400}, {x:400,y:0}], fill:"Yellow"            }            ]             for(vari=0;i<paths.length;i++) {Draw (paths[i],context); }                    }        functionDraw (objpath,context) {varpath=objpath["Path"]; varfillstyle=objpath["Fill"]; Context.beginpath ();//start a new pathContext.moveto (path[0]["x"],path[0]["Y"]);  for(vari=1;i<path.length;i++) {Context.lineto (path[i]["X"],path[i]["Y"]); } context.closepath ();//ends the current path and forces the enclosing pathContext.fillstyle=fillstyle;//Fill ColorContext.fill ();//Start fillingcontext.linewidth=1;//line widthContext.strokestyle= "Red";//Line ColoringContext.stroke ();//Start Drawing Paths        }    </script></body>Semi-finished demo
　　
Study NOTE: HTML5 Canvas drawing Simple graphics