html5中<canvas>标签的具体用法详解

canvas是HTML5中新定义的标签，顾名思义，它本身是一个画布标签，没有自己的行为，只是一个图形容器，必须使用脚本来绘制图形。下面是它用法的示例：

<canvas id="canvas" width="200" height="300"> 
Your browser does not support HTML5 Canvas. 
</canvas>

从上述代码可以看出，canvas标签有三种属性：id,width,height.其中，定义id值是为了在JavaScript代码中用其引用该canvas标签，从而以canvas为接口进行绘画。width和height分别定义了canvas的宽度和高度，默认以像素为单位，数字后不能加px单位。

canvas标签不是所有浏览器都支持的，因此我们需要在canvas的开始和结束标签之间可以放置一段文本，当浏览器不支持canvas标签时，这段文本将显示在canvas标签所在的位置上，以提醒读者canvas标签不适用于此浏览器。在javascript中也要判断浏览器是否支持此标签：

var canvas=document.getElementById("canvas") 
if(!canvas.getContext) 
{ 
alert("Your browser does not support HTML5 Canvas.") 
} 
else 
{ 
//do something here 
}

可以用个canvas元素来显示一个红色的矩形：

<canvas id="Canvas"></canvas> 
<script type="text/Javascript"> 
var canvas=document.getElementById('Canvas'); 
var ctx=canvas.getContext('2d'); 
ctx.fillStyle='#FF0000'; 
ctx.fillRect(0,0,80,100); 
</script>

如上例，绘图API都没有定义在canvas元素本身上，而是定义在通过画布的getContext()方法获得的一个绘图环境对象上。canvas API也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用beginPath()和arc()方法。一旦定义了路径，其他的方法如fill()，都是对此路径操作。