width="750">
##1.canvas>Tag Html5 Introduced a new 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> Copy after login |
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
Students all know that drawing in Windows requires first obtaining a device context DC. Drawing on the
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!