At the HTML5 list, we mention that HTML 5 is crowned with a lot of hats, the highest of which is the controversial "flash killer". It critics like to use the word, the killer everywhere. Whether it's a killer or not, some of the new features introduced in HTML 5 are really exciting. One of the most anticipated is the canvas element.
As part of the HTML5 standard, the canvas element allows the script to render bitmap images dynamically. This HTML element is designed for client-side vector graphics. It does not act on its own, but presents a drawing API to client JavaScript so that the script can draw everything it wants to draw onto a canvas. The HTML 5 canvas provides a way to draw graphics through JavaScript, which is simple but powerful. Each canvas element has a "context" (pictured as a page on the drawing board) in which any graphic can be drawn. Xingcheng Fayon Gift
Most browsers support the 2D canvas context-including Opera, Firefox, Konqueror and Safari. And some versions of Opera also support 3D canvas, Firefox can also be used in the form of plug-in support 3D canvas. We can even use the <canvas> tag in IE and build a compatible canvas with open source JavaScript code (initiated by Google) on the basis of the VML support of IE. See also: http://excanvas.sourceforge.net/.
Effect Demo
<ptml> <pead> <title>canvas tutorial</title> <script type= "Text/javascript" > Fun Ction Draw () {var ctx = document.getElementById (' canvas '). GetContext (' 2d '); Draw the red canvas Ctx.fillstyle = ' #f00 '; Ctx.fillrect (0,0,450,300); Ctx.translate (75,75); Draw large pentagram ctx.save (); Ctx.rotate (MATH.PI*2/7); Drawstar (ctx,40); Ctx.restore (); Draw four small pentagram ctx.save (); Ctx.translate (80,-50); Drawstar (ctx,10); Ctx.restore (); Ctx.save (); Ctx.translate (110,-10); Drawstar (ctx,10); Ctx.restore (); Ctx.save (); Ctx.translate (110,30); Drawstar (ctx,10); Ctx.restore (); Ctx.save (); Ctx.translate (80,70); Drawstar (ctx,10); Ctx.restore (); }//plotting the Pentagram function Drawstar (ctx,r) {ctx.save (); Ctx.beginpath () Ctx.moveto (r,0); for (Var i=0;i<9;i++) {ctx.rotate (MATH.PI/5); if (i%2 = = 0) {Ctx.lineto ((r/0.525731) *0.200811,0); } else {Ctx.lineto (r,0); }} ctx.closepath (); ctx.fillstyle= ' #FFFF00 '; Ctx.fill (); Ctx.restore ();} </script> </pead> <body onload= "Draw ();" > <canvas id= "Canvas" width= "height=" ></canvas> </body></ptml>
The HTML5 code is as follows:
View Source print?
03 |
<title>Canvas tutorial</title> |
04 |
<scripttype="text/javascript"> |
06 |
var ctx = document.getElementById(‘canvas‘).getContext(‘2d‘); |
08 |
ctx.fillStyle = ‘#f00‘; |
09 |
ctx.fillRect(0,0,450,300); |
13 |
ctx.rotate(Math.PI*2/7); |
18 |
ctx.translate(80,-50); |
22 |
ctx.translate(110,-10); |
26 |
ctx.translate(110,30); |
35 |
function drawStar(ctx,r){ |
39 |
for (var i=0;i<9;i++){ |
40 |
ctx.rotate(Math.PI/5); |
42 |
ctx.lineTo((r/0.525731)*0.200811,0); |
48 |
ctx.fillStyle=‘#FFFF00‘; |
54 |
<bodyonload="draw();"> |
55 |
<canvasid="canvas" width="800"height="300"></canvas> |
HTML5 Drawing flag with canvas
