Learn HTML5 while playing (1) - Detailed explanation of canvas

width="750">

#The above code displays the following effect:

##1.canvas>Tag Html5 Introduced a new tag. The area represented by this tag is like a canvas, and all your graphic drawings will eventually be presented on this canvas. With this tag, the graphical performance of the browser has been greatly improved. Do Flash and SilverLight feel threatened? News link: Google claims that the Chrome7 browser will 60 times faster <canvas>标签的用法非常简单，如下： <canvas id="tutorial" width="150" height="150" style="background-color:red;"> 你的浏览器不支持 Canvas 标签</canvas> tags are not much different from ordinary HTML tags. You can set its width and height, and you can set its background through CSS. color, border style, etc. You can find out more about the tag here. The content in the middle of the tag is replacement content. If the user's browser does not support the tag, this content will be displayed; if the user If your browser supports the tag, this content will be ignored.

If you are using

IE browser

, you may only see one prompt; if you are using Google Chrome or Firefox browser , you can see a red square area.

2. Rendering Context Rendering Context

In fact, we can’t do anything just with the tag. Those who have played Windows

Programming

Students all know that drawing in Windows requires first obtaining a device context DC. Drawing on the tag also requires first obtaining a rendering context. Our graphics are not drawn directly to the screen. Instead, it is drawn to the context first, and then refreshed to the screen.

Digression: Why do we need to create such a complicated concept as "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 do the other work. Go ahead and worry about it. To put it bluntly, it means turning all kinds of concrete things into unified abstractions, thereby reducing our burden. Getting the context is very simple, just need the following two lines of code:

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 currently only pass in parameters." 2d", in the near future he may support the parameter "3d", you must understand what that means, let's look forward to it.

The getContext method returns a CanvasRenderingContext2D object, which is the rendering context object. You can find more information about it in

Here

, which are some drawing methods.

3. Browser support In addition to displaying alternative content on browsers that do not support it, we can also use scripts To check whether the browser supports canvas, the method is very simple, just determine whether the getContext

function

exists, the code is as follows:

var canvas = document.getElementById('tutorial'); 
if (canvas.getContext){ 
    alert("支持 <canvas> 标签"); 
} else { 
    alert("不支持 <canvas> 标签");

The above is the detailed content of Learn HTML5 while playing (1) - Detailed explanation of canvas. For more information, please follow other related articles on the PHP Chinese website!