HTML5 Canvas (i)

1. History

The concept of canvas was originally proposed by Apple for use in Mac OS X WebKit to create a dashboard widget (Dashboard widget).

2.canvas

When you use canvas on a page, it creates a rectangular area. By default, the rectangular area is 300 pixels wide and 150 pixels high.

<canvas></canvas>

3.canvas coordinates

The canvas coordinates start at the upper-left corner, the x-axis extends to the right in the horizontal direction (in pixels), and the y-axis extends vertically.

4.canvas and CSS

Canvas uses CSS to add borders, set padding, margins, and so on, and some CSS properties can be inherited by elements within the canvas.

5. Check whether the browser supports canvas

Try{document.createelement ("Canvas"). GetContext ("2d");d Ocument.getelementbyid ("Support"). Innerhtml= "HTML5 Canvas is supported in your browser. ";} catch (E) {document.getElementById ("support"). Innerhtml= "HTML5 Canvas is not supported in your browser.";}

6. Draw a diagonal line in the canvas

<canvas id= "Diagonal" style= "border:1px solid;" Width= "height=" ></canvas><script> function drawdiagonal () "{var Canvas=document.getelementbyid (' diagonal '); var context=canvas.getcontext (' 2d '); Context.beginpath (); Context.moveto (70,140); Context.lineto (140,70); Context.stroke ();} </script>

7. Draw a diagonal line on the canvas in a transformed way

1<script>2 3 functiondrawdiagonal () {4 5 varCanvas=document.getelementbyid (' diagonal ');6 7 varContext=canvas.getcontext (' 2d ');8 9 //Save current draw statusTen  One Context.save (); A  - //move the drawing context lower right -  theContext.translate (70,140); -  - //start with the origin and draw the same line segment as before -  + Context.beginpath (); - Context.moveto (); +Context.lineto (70,-70); A Context.stroke (); at  - //restore the original drawing state - Context.restore (); -  - } -Windows.addeventlistener ("Load", drawdiagonal,true); in</script>

8. Path

The first thing to call is Beginpath, no matter what shape you want to start drawing. You can then use the various methods of the context to draw the desired shape.

Context Path function:

• MoveTo (x, y): Do not draw, just move the current position to the new target coordinates (x, y)
• LineTo (x, y): Not only moves the current position to (x, y), but also draws a line between two coordinates

No images can be drawn either with MoveTo or lineto, using a stroke or fill function to draw an image

• Closepath (): Behaves like a LineTo, Closepath automatically takes the starting coordinates of the path as the target coordinates. Closepath also notifies the currently drawn shape that the drawing is closed or that a completely closed area is formed.

Functions for drawing canopy outlines

1 functionCreatecanopypath (context) {2 //Draw Canopy3 Context.beginpath ();4 5Context.moveto ( -25,-50);6Context.lineto ( -10,-80);7Context.lineto ( -20,-80);8Context.lineto ( -5,-110);9Context.lineto ( -15,-110);Ten  One //the vertex of a tree AContext.lineto (0,-140); -  -Context.lineto (15,-110); theContext.lineto (5,-110); -Context.lineto (20,-80); -Context.lineto (10,-80); -  +Context.lineto (25,-50); -  + //connect start, close path A Context.closepath (); at  -}

The function of drawing trees on canvas

1 functiondrawtrails () {2 varCanvas=document.getelementbyid (' Trails ');3 varContext=canvas.getcontext (' 2d ');4 5 Context.save ();6Context.translate (130,250);7 8 //create a path to a representation tree9 Createcanopypath (context);Ten  One //Draw Current Path A Context.stroke (); - Context.restore (); -}

HTML5 Canvas (i)