Canvas技术入门：介绍、线条绘制

Canvas是HTML 5中新增加的一种元素，可以把它想象成一个可以作画的画布，它提供了Javascript API，用这些API可以在上面绘制线条、多边形、圆弧、图片、文字等。和SVG不同，Canvas是基于位图而不是矢量的。

<canvas>标记由 Apple 在 Safari 1.3 Web浏览器中引入。对 HTML的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。接下来Mozilla和Opera分别实现了这一功能，后来WHATWG组织将其标准化到HTML5中，成为下一代Web应用程序中的重要技术之一。
在HTML中使用Canvas非常简单，只需要插入如下的代码：

1<canvas id="example1" width="400" height="300"><BR>您的浏览器不支持canvas，请升级。<BR></canvas>

你可以使用CSS来指定Canvas元素的样式，比如width、height、margin、padding、border、background等属性，也可以通过document.getElementById或者其它DOM方法来获取Canvas元素对象，这和其它元素（比如图片）并没有区别。

不同的是，在获取到Canvas的DOM对象后，我们可以做更多的事情，那就是在它上面涂鸦。不过，在开始之前，必须要获取到画布的Context：

1var elem = document.getElementById("example2");

2var context = elem.getContext("2d");

getContext这个方法必须要传一个参数，来标示你接下来是要画2D的图还是3D的图。虽然目前并没有浏览器实现3D画图，但是这个接口是预留了。在获取到context之后，我们就可以进行一些画图操作了。

绘制线条

在Canvas元素上画线有点类似于使用Windows自带的画图工具，其操作步骤是先选择画笔宽度、颜色、背景等，然后进行画画。

1//准备画笔

2context.strokeStyle = '#f00';

3context.lineWidth   = 10;

4//开始画线

5context.beginPath();

6context.moveTo(15, 50);

7context.lineTo(350, 50);

8context.stroke();

9context.closePath();

在以上代码中，前两行代码分别设置了线条的样式为红色，线条宽度为10。接下来调用beginPath开始画线，然后调用moveTo方法将画笔移动到(20, 10)这个坐标点，从这个点下笔绘制直线到(350, 10)。请注意，代码执行到目前为止，在画布上是看不到任何东西的，因为所有的线都必须经过stroke方法执行后，才会显示出来。这就好比我们在画画时，先用铅笔将线描出来，然后用画笔进行着色一样。要结束一条线时，需要调用closePath方法，否则再继续画线时，会和这条线的终点连起来。最终的图如下所示：

Canvas中除了画线，还可以进行矩形绘制、将页面中的图片绘制到画布、旋转平移和缩放画布、像素运算等操作，这些内容将在以后的篇幅中介绍。