Html5-Canvas使用方法
原文参见：http://www.html5.jp/canvas/how.html
本文介绍Canvas使用时的准备和简单的使用方法。
1. 下载ExplorerCanvas
因为IE不支持Canvas，所以需要下载Google提供的ExplorerCanvas JS类库。
到2009/03/24是为止，ExplorerCanvas的最新版本是Release3。下载excanvas_r3.zip之后，进行解压，会看到excanvas.js文件，实际使用的时候用到的就是这个文件。把这个文件放置到与需要使用Canvas的Html文件相同的路径下。
2. Html的准备
在使用Canvas的html文件中，给head元素中添加script元素来加载excanvas.js文件。然后，在想使用canvas画图的地方添加Canvas元素。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Canvas</title>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
</head>
<body>
<h1>Canvas</h1>
<canvas id="canvassample" width="140" height="140"></canvas>
</body>
</html>
script标签被<!--[if IE]>...<![endif]-->包围着，这样只有IE认识，其他浏览器都相当于注释掉了。因为对于IE之外的浏览器，excanvas.js是不起作用的，所以为了防止多余的文件下载，这也是一个不错的方法。如果不用这种方法，通过script标签即使下载了excanvas.js，对于IE之外的浏览器也不会有问题。
然后，在想画图的地方，添加canvas标签，canvas是Html5新规定的标签。这个标签使用到的属性只包含，表示框区间的width和height属性。这两个属性都不是必须的，如果没有指定它们，就使用不同浏览器的默认值。Firefox的默认值是300*150。
3. JavaScript框架
Canvas使用JS进行画图，下面的例子画了一个正方形。让我们通过这个例子来看看Canvas的使用方法。
onload = function() {
draw();
};
function draw() {
/* canvas标签的节点对象 */
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
/* 2D上下文 */
var ctx = canvas.getContext('2d');
/* 华正方形 */
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(120, 20);
ctx.lineTo(120, 120);
ctx.lineTo(20, 120);
ctx.closePath();
ctx.stroke();
}
首先拿到canvas标签的节点对象，这里使用的是Dom的getElementById方法，当然也可以使用getElementByTagName。
拿到canvas标签的节点对象后，必须进行检查。在这个例子当中，如果canvas对象不存在或者没有getContext方法的时候，也就是不支持canvas的浏览器，就不进行任何处理。
getContext方法是Html5针对canvas定义的Dom新方法中的一个。对于IE浏览器，通过excanvas.js，getContext方法也定义好了。
getContext方法只接受参数“2D”，将来或许会支持"3D"，现在只支持“2D”。将通过getContext方法取得的2D上下文对象赋给ctx对象，然后，在画图的时候，就通过ctx对象进行方法调用。
那么，下面，就看看实际画图的方法：
- 开始划线：ctx.beginPath();
- 指定线的起点：ctx.moveTo(20, 20);
- 指定线的终点：ctx.lineTo(120, 20);
- 指定线的终点：ctx.lineTo(120, 120);
- 指定线的终点：ctx.lineTo(20, 120);
- 关闭画下的线：ctx.closePath();
- 通过线将画出的图形描画出来：ctx.stroke();
就像这样，如果想要划线的时候，就可以重复上面的步骤。
3~5. 步使用的lineTo方法，是从现在的坐标开始，到参数指定的坐标为止，画一条直线。
6. 步使用的closePath方法，是将画出的图形自动用直线进行闭合。当然可以使用ctx.lineTo(20, 20)来替换closePath()，不过通过closePath就不需要指定坐标的位置，代码也简单一些。
7. 步的stroke方法，是将画出的图像用线来描画出来。如果不调用这个方法，在浏览器上就看不到想画的图形。如果想以填充的方式画图的话，就用fill方法替换stroke方法。也就是ctx.fill()。
这个例子中，只使用了画直线的lineTo方法，另外还有画矩形的rect方法，弧形的arc方法，二次曲线的quadraticCurveTo方法，贝塞尔曲线的ezierCurveTo方法等等。详细请参见:Canvas参照。
4. 坐标系
上个例子当中个，在moveTo方法，lineTo等方法中指定了坐标。Canvas的坐标起点是从Canvas标签的左上角开始计算的。<canvas width="400" height=“300”>的坐标系如下图所示：
以左上角为起点，向右为X轴，向下为Y轴。左上角的坐标为(0, 0)，右下角的坐标为(400, 300)。
通过Canvas不仅可以划线，也有其它画各种图形的方法。下一节中，将会介绍另外利用canvas画图的另外几个方法。 >>描绘各种图形