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

width="750">

<canvas>标签的用法非常简单，如下：
<canvas id="tutorial" width="150" height="150" style="background-color:red;">
            你的浏览器不支持 Canvas 标签</canvas>

If you are using

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

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

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.

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

, 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

exists, the code is as follows:

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