<canvas> 标签被认为是html新标准中最重要的标签,canvas允许你在浏览器里绘制任何图案,不要小看这一功能,它绝对给基于浏览器的应用带来了全新的应用体验.本文通过一个简单的范例演示了html5中canvas标签的使用方法.

<canvas> 标签被认为是html新标准中最重要的标签,canvas允许你在浏览器里绘制任何图案,不要小看这一功能,它绝对给基于浏览器的应用带来了全新的应用体验.

到底什么是 <canvas> 标签?

<canvas>作为和别的html标签一样是作为一个普通的元素加入到html5中的, 客户端可以在不需要任何插件的情况下在浏览器中绘制图形,这也就是为什么大家会认为flash会被html5取代的原因        

只需要使用javascript你就可以把浏览器当做画布进行绘画了,想想就很激动,javascript也因此更有用武之地了.        

   如何打开canvas的潜力

   首先定义一个 <canvas> 标签

要定义一个canvas标签,只需要象定义其他html标签一样,看下面的例子:      

<canvasid="mycanvas"width="400"height="300">Your browser does not support HTML5 - sharejs.com</canvas>

正如你看到的, <canvas> 标签有一些很好理解的属性 :                

id –标签在dom中唯一编号. 待会我们将通过id访问canvas                                

width –  canvas的宽度                                

height – canvas的高度                                

用户的浏览器可能不支持<canvas>标签, 所以你需要给用户一个提示. 

最简单的你可以在<canvas> 中添加一段提示信息或者放一张图片.                

在我们的范例中加入了一行文本提示 “Your browser does not support HTML5 - sharejs.com”                

获取上下文:                

要使用 <canvas>标签,你必须使用javascript来访问它, 我们通过javascript的getElementById函数来访问canvas,      

范例如下:                        

var eMyCanvas = document.getElementById('mycanvas');

canvas包含了2D和3D两个引擎,在访问canvas的时候你需要声明访问它的哪个引擎,这里我们需要访问 “2D”引擎,代码如下:                                      

var ctx = eMyCanvas.getContext('2d');

基本范例:

现在你就可以开始绘画了, 例如:画一个矩形                                

ctx.fillRect(0,0,100,100);

这段代码的意思是从坐标0,0开始绘制一个高度和宽度均为100像素的矩形        

下面是完整的代码,你可以在你的浏览器里试试:                             

var eMyCanvas = document.getElementById('mycanvas'); var ctx = eMyCanvas.getContext('2d'); ctx.fillRect(0,0,100,100); ctx.stroke();

下面是代码执行结果:

Your browser does not support HTML5