HTML5 Learning (1) Canvas implementation method

First, <canvas> label

HTML5 introduces a new <canvas> tag that represents the area as if it were a canvas, and all of your graphic drawings will be rendered on this canvas at the end. With this tag, the browser's graphic expressiveness is greatly improved, and does Flash and SilverLight feel threatened?

News Link: Google claims Chrome7 browser will speed up 60 times times

The <canvas> tag is very simple to use, as follows

1. <canvas id= "Tutorial" width= "height=" "style=" ">
2. Your browser does not support Canvas labels
3. </canvas>

Copy Code

<canvas> tags and ordinary HTML tags are not much different, you can set its width and height, you can set its background color through CSS, border style, and so on.

You can find more information about <canvas> tags in w3cschool.

The content in the middle of the label is the replacement content, if the user's browser does not support the <canvas> tag, this content will be displayed, if the user's browser support <canvas> tags, this content will be ignored.

The <canvas> code above shows the following results:

Your browser does not support Canvas labels

If you are using Internet Explorer, you may only see a hint, and if you use Google Chrome or Firefox, you can see a red block area.
second, render context Rendering contexts
In fact, the light has <canvas> tags we can not do anything, played by the Windows programming students know that in Windows to draw first to get a

Device context DC, drawing on the <canvas> tab also needs to get a rendering context, our graphics are not drawn directly to the screen, but first drawn to

Context, and then flush to the top of the screen.

Digression: Why do you want to complete a "context" so complex concept? Because of the contextual object, we can make a variety of different graphics devices in our eyes

Face look is a kind, we just need to focus on the drawing, the other work let the operating system and browser to worry about it, the white is to make a variety of concrete into

A unified abstraction that relieves us of our burdens.

Getting the context is very simple and requires only two lines of code:
var canvas = document.getElementById (' tutorial ');
var ctx = Canvas.getcontext (' 2d ');

First get the Canvas object, and then call the canvas object's GetContext method, this method can only pass in the parameter "2d", in the near future he may support the parameter "3d", you must understand what that means, let us look forward to it.
The GetContext method returns a Canvasrenderingcontext2d object, which is the render context object, and you can also find more information about it in W3cschool, which is a few drawing methods.

third, browser support
In addition to displaying the replacement content on browsers that do not support it, we can also script to check whether the browser supports canvas, and it is simple to determine if the GetContext function exists and the code is as follows:

1. var canvas = document.getElementById (' tutorial ');
2. if (Canvas.getcontext) {
3. Alert ("Support <canvas> labeling");
4. } else {
5. Alert ("Do not support <canvas> tag");
6. }

Copy Code

四、一个 Small Example

Here is an example of a line that moves up and down with the HTML5 drawing function, which will be given in the next section

2. <canvas style= "Your browser does not support <canvas> tags, please use Chrome browser or FireFox browser </canvas>
4. <script type= "Text/javascript" >
6. var canvas = document.getElementById (' Move_line ');
8. var Ctx=canvas.getcontext ("2d");
10. A straight line moving up and down
12. var width=400;
14. var height=200;
16. var y=0
18. var dir=1;
20. Ctx.strokestyle = "RGB (255,0,0)";
24. function Draw () {
26. Ctx.clearrect (0,0,width,height)
28. Ctx.beginpath ();
30. Ctx.moveto (0,y);
32. Ctx.lineto (Width-1,y);
34. Ctx.stroke ();
36. Y=y+dir;
38. if ((y==0) | | | (y== (height-1))) dir=dir* (-1);
40. }
44.     </script><p><input onclick= "Interval=setinterval (draw,10);" value= "Start" type= " Button "> <input onclick=" clearinterval (interval), "value=" Stop "type=" button ";