<canvas>是html5规范中的标签，通过JavaScript脚本可以在canvas中绘画出图形或实现动画效果。更多canvas的资料请查看：The canvas element — HTML5 (including next generation additions still in development)
写在前面
对于canvas的历史我就不多赘述，Google比我知道的多！我们直接从实例开始我们的旅程。本文虽然是讲canvas，但更多的是JavaScript内容，因此要继续下去，你需要一点JavaScript基础。现在<canvas>并没有被所有浏览器支持，你需要一些支持html5的浏览器来测试文中的例子（如：Firefox1.5+，较新版本的Safari或Chrome以及opera9+等）。本人使用的浏览器是Firefox3.6.3并在此环境下做所有测试。如果你想让ie也支持可以使用explorercanvas，用vml来描述canvas的内容，使用起来很简单，只要加入下面代码即可。
XHTML
| <!–[if IE]><script src= »excanvas.js »></script><![endif]–> |
Hello,canvas！
首先，我们来看一段最简单的代码
XHTML
| <!DOCTYPE html><html><head><meta charset= »utf-8″ /><title>Canvas demo</title><style type= »text/css »>canvas { border:1px #000 solid; /*width:300px; height:300px;*/}</style></head><body><h1>this is a canvas api test page!</h1><canvas id= »canvas » width= »300″ height= »300″>this browser does not support canvas…</canvas></body></html> |
当你在支持html5 canvas的浏览器下查看页面的时候，你会看到一个大小为300px*300px（BTW：canvas默认大小为：300px*150px），边框为1px宽的方框，而在ie下，你只能看到一句话：this browser does not support canvas…。正如你所看到的那样，canvas跟其他标签一样，可以通过css来定义样式，也可以用它本身支持的html属性来定义宽和高。但是这里有一点需要注意：在css中为canvas定义宽高，实际是将canvas进行拉伸，因此，如果在这样的情况下在canvas中绘图，你得到的图形可能就是变形的。所以建议直接在canvas中用html属性来定义canvas的大小。
canvas with JavaScript
接下来，我们来演示如何通过JavaScript在canvas里绘图。
XHTML
| <!DOCTYPE html><html><head><meta charset= »utf-8″ /><title>Canvas javascript api demo</title><style type= »text/css »>canvas { border:1px #000 solid; /*width:300px; height:300px;*/}</style></head><body><h1>this is a canvas api test page!</h1><canvas id= »canvas » width= »300″ height= »300″>this browser does not support canvas…</canvas><script type= »text/javascript »>var $=function(id){ return document.getElementById(id);}window.onload=function(){ var ctx=$(‘canvas’).getContext(‘2d’); ctx.fillStyle=’rgba(255,0,0,1)’; ctx.fillRect (10, 10, 50, 50); ctx.fillStyle = « rgba(0, 255, 0, 0.5) »; ctx.fillRect (30, 30, 50, 50); ctx.fillStyle = « rgba(0, 0, 255, 0.5) »; ctx.fillRect (50, 50, 50, 50); }</script></body></html> |
canvas提供了一个接口来实现一种或多种的渲染环境（rendering context），但目前还只实现了2D渲染环境。通过这个接口，我们就可以在canvas中绘图了。那么在绘图前，我们先取得这个环境：
JavaScript
| 1 | var ctx=$(‘canvas’).getContext(‘2d’);//通过canvas的id取得canvas并调用getContext方法得到2d渲染环境，目前只有2d为有效值。 |
代码中getContext(‘2d’)方法返回CanvasRenderingContext2D对象，该对象拥有的方法和属性可以参考文章一开始提到的url。这里我们简单介绍fillStyle属性跟fillRect方法，更多用法我会在后面的学习中演示。
fillStyle是为当前环境配置填充颜色，它支持rgb值或rgba值或十六进制值（如：#F00），也支持hsl或hsla值，默认为黑色；
fillRect定义了填充区域为矩形，并由四个参数来设置填充的位置及大小，第一二两个参数为相对canvas左上角的坐标值，三四两个参数为所填充的矩形区域的宽和高，填充颜色使用fillStyle值。与之相反的方法就是clearRect，用来擦除指定区域内容，参数及用法与fillRect类似。