Learn while playing with HTML5 (1) Canvas implementation method _html5 tutorial skills

1. tag

Html5 introduces a new tag. The area represented by this tag is like a canvas. All your graphics drawings will end up To be presented on this canvas. With this tag, the graphics performance of the browser has been greatly improved. Do Flash and SilverLight feel threatened?

News link: Google claims that the Chrome 7 browser will be 60 times faster

The usage of the tag is very simple, as follows:

Copy the code

The code is as follows:

Your browser does not support the Canvas tag
canvas>

tags are not much different from ordinary HTML tags. You can set its width and height, and set its background color, border style, etc. through CSS. wait.

You can find more about the tag here. The content in the middle of the

tag is the replacement content. If the user's browser does not support the tag, this content will be displayed; if the user's browser supports the tag, then this content will be displayed. The content of the section will be ignored.

The above code displays as follows:

Your browser does not support the Canvas tag

If you are using IE browser, you may only be able to view it Get a tip; if you are using Google Chrome or Firefox, you can see a red square area.
2. Rendering Context
In fact, we can’t do anything just with the tag. Students who have played with Windows programming all know that before drawing in Windows, you must first get a Device context DC, drawing on the tag also requires first obtaining a rendering context. Our graphics are not drawn directly to the screen, but to the context (Context) first, and then refreshed to the screen. .
Off-topic: 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 take care of other work. To put it bluntly, It is to turn various 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');
Get it first canvas object, and then call the getContext method of the canvas object. This method currently can only pass in the parameter "2d". In the near future, it 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 here, which are some drawing methods.

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, just determine whether the getContext function exists, the code is as follows:

Copy the code

The code is as follows:

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
alert("Supports tag");
} else {
alert(" tag is not supported");
}

四、一个小例子
下面将用 HTML5 的绘图功能演示一个上下移动的线条的例子， 具体的代码将在后续内容中给出

<canvas style="background-color: black" id="move_line" height="200" width="400">你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas> <script type="text/javascript"> var canvas = document.getElementById('move_line'); var ctx=canvas.getContext("2d"); //上下移动的直线 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="开始" type="button"> <input onclick="clearInterval(interval);" value="停止" type="button"> </p>
提示：您可以先修改部分代码再运行

你的浏览器不支持 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器