Comment: Html5 introduces a new label, and the area represented by this label is like a canvas. All your graphic drawings must be presented on this canvas at the end. With this tag, the browser's graphics expressiveness has been greatly improved. Do Flash and SilverLight feel threatened?
1. <canvas> tagHtml5 introduces a new <canvas> tag, the area represented by this tag is like a canvas, and all your graphic drawings must be presented on this canvas at the end. With this tag, the browser's graphics expressiveness has been greatly improved. Do Flash and SilverLight feel threatened?
News link: Google claims Chrome 7 browser will speed up 60 times faster
The usage of the <canvas> tag is very simple, as follows:
<canvas>
Your browser does not support the Canvas tag
</canvas>
There is no big difference between the <canvas> tag and the ordinary HTML tag. You can set its width and height, and you can set its background color, border style, etc. through CSS.
You can find more about the <canvas> tag 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 will be ignored.
The above <canvas> code displays the following effect:
Your browser does not support the Canvas tag
If you are using IE browser, you may only see a prompt; if you are using Google Chrome or Firefox browser, you can see a red square area.
2. Rendering Context
In fact, we cannot do anything with the <canvas> tag. Students who have played Windows programming know that in drawing in Windows, you must first get a device context DC, and when drawing on the <canvas> tag, you also need to get a rendering context. Our graphics are not drawn directly on the screen, but on the context (Context) first, and then refresh on the screen.
Off topic: Why do you need to put together a concept with such a complex context? Because of the context object, we can make various graphics devices look the same in our eyes. We only need to focus on drawing, and let the operating system and browser worry about other tasks. To put it bluntly, turn all kinds of concrete into unified abstractions, thereby reducing our burden.
Getting the context is very simple, you only need two lines of code as follows:
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
First, get the canvas object, and then call the getContext method of the canvas object. This method can only pass in parameter 2d at present. In the near future, it may support parameter 3d. 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. You can find more about it here, all of which are some drawing methods.
3. Browser support
In addition to displaying alternative content on those unsupported browsers, we can also check whether the browser supports canvas through scripts. The method is very simple. Just judge whether the getContext function exists. The code is as follows:
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
alert("Support <canvas> tag");
} else {
alert("not supported <canvas> tag");
}
4. A small example
Below, an example of moving lines up and down will be demonstrated using HTML5's drawing function. The specific code will be given in the subsequent content.
Your browser does not support the <canvas> tag, please use Chrome or FireFox browser