HTML5 playing and learning (1) canvas Implementation Method

Comments: Html5 introduces a new Label. The area represented by this label is like a canvas. All your drawing will be rendered on this canvas. With this label, the graphic expression of the browser is greatly improved. Does Flash and SilverLight feel any threat? 1. <canvas> label

Html5 introduces a new <canvas> label. The label represents a canvas, and all your images will be rendered on the canvas. With this label, the graphic expression of the browser is greatly improved. Does Flash and SilverLight feel any threat?

News link: Google claims chrome 7 will speed up 60 times

<Canvas> labels are easy to use as follows:

The Code is as follows:
<Canvas id = "tutorial" width = "150" height = "150" style = "background-color: red;">
Your browser does not support Canvas labels.
</Canvas>


<Canvas> A tag is not much different from a common HTML Tag. You can set its width and height, and set its background color and border style through CSS.

You can find more information about the <canvas> label here.

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

The preceding <canvas> code displays the following results:

Your browser does not support Canvas labels.

If you are using IE, you may only see one prompt. If you are using Google or Firefox, you can see a Red Square area.
Ii. Rendering Context
In fact, we can't do anything with the <canvas> label. Anyone who has been programming in Windows knows that drawing in Windows requires a device context DC first, drawing on the <canvas> label also requires a rendering Context. Our drawing is not directly painted on the screen, but first painted on the Context, then refresh to the screen.
Question: Why is it necessary to create a complex concept like context? With context objects, we can make different graphics devices look like this in our eyes. We only need to focus on plotting, for other work, let the operating system and the browser worry about it. To put it bluntly, all kinds of specifics are transformed into unified abstraction, thus reducing our burden.
It is very easy to get the context. You only need the following two lines of code:
Var canvas = document. getElementById ('utorial ');
Var ctx = canvas. getContext ('2d ');
First obtain the canvas object and then call the getContext method of the canvas object. Currently, this method can only pass in the "2d" parameter. In the near future, it may support the "3d" parameter ", you must understand what that means. Let's look forward to it.
The getContext method returns a CanvasRenderingContext2D object, that is, the rendering context object. Here you can find more information about it, which is a plotting method.

3. browser support
In addition to displaying alternative content on unsupported browsers, we can also use scripts to check whether the browser supports canvas. The method is very simple and you can determine whether the getContext function exists. The Code is as follows:

The Code is as follows:
Var canvas = document. getElementById ('utorial ');
If (canvas. getContext ){
Alert ("supported <canvas> labels ");
} Else {
Alert ("<canvas> tag not supported ");
}


4. A small example
The following uses the HTML5 plotting function to demonstrate an example of moving up or down a line. The specific code will be provided in the subsequent content.

<Canvas style = "background-color: black" id = "move_line" height = "200" width = "400"> your browser does not support & lt; canvas & gt; label. Use Chrome or FireFox </canvas> <script type = "text/javascript"> var canvas = document. getElementById ('move _ line'); var ctx = canvas. getContext ("2d"); // the straight line var width = 400; var height = 200; var y = 0 var dir = 1; ctx. strokeStyle = "rgb (255, 0, 0)"; function draw () {ctx. clearRect (0, 0, width, height) ctx. beginPath (); ctx. moveTo (0, y); ctx. lineTo (width-1, y); ctx. stroke (); y = y + dir; if (y = 0) | (y = (height-1 ))) dir = dir * (-1) ;}</script> <p> <input onclick = "interval = setInterval (draw, 10 ); "value =" start "type =" button "> <input onclick =" clearInterval (interval); "value =" stop "type =" button ">

Tip: you can modify some code before running
Your browser does not support <canvas> labels. Use Chrome or FireFox.