html5canvas画图（JavaScript操作Canvas实现画板实例分析）

以前在网页中进行交互绘图是很困难的（需要依赖额外的第三方插件），而引入的Canvas特性使得作者可以很容易的在网页上绘制各种图形和图像。

Canvas提供了脚本（JavaScript）应用接口，我们可以使用JS代码来操作画布，添加各种图形以及实现用户交互。这些特性使得HTML5在开发网页游戏和一些复杂的网页动画上变得更加方便。

比如下面这个例子，使用canvas实现了简单的在线画板功能，你可以直接在网页上绘制线条：

实例可访问：http://www.ikinsoft.com/3ddemo/Canvas.html

效果图如下：

canvas元素并非Canvas中最强大的部分，真正的关键部分是2D渲染上下文，这是你真正绘制图形的地方。canvas元素的用途只是作为2D渲染上下文的包装器，它包含绘图和图形操作所需要的全部方法和丰富功能。理解这一点是很重要的，强调一下：绘图是在2D渲染上下文中进行的，而不是在canvas元素中进行。可以通过canvas元素访问和显示2D渲染上下文。

坐标系统

2D渲染上下文是一种基于屏幕的标准绘图平台。与其他的2D平台类似，它采用平面的笛卡儿坐标系统，左上角为原点（0,0）。向右移动时，x坐标值会增加；向下移动时，y坐标值会增加。如果你想把图形绘制到正确的位置上，一定要理解这个坐标系统。

坐标系统的1个单位通常相当于屏幕的1个像素，所以位置（24，30）是向右24像素和向下30像素的位置。有时候坐标系统的1个单位相当于2个像素（例如，在一些高分辨率显示器中），但是一般的经验法则是1个坐标单位等于1个屏幕像素。

访问2D渲染上下文

我们先创建只有一个空白canvas元素的简单HTML网页：

<canvas id="myCanvas" width="200" height="200">

<!-- Insert fallback content here -->

</canvas>

在这个例子中，我们将这个canvas元素赋值给一个变量，然后再通过调用getContext方法将得到的2D渲染上下文赋给另一个变量。 必须强调一点，由于我们使用了jQuery，所以需要调用get方法才能访问DOM中的canvas元素，然后才能够访问Canvas的getContext方法。

有了包含2D渲染上下文的变量之后，就可以开始绘制图形了。在上下文变量声明语句之后添加下面这行代码：

context.fillRect(0,0,200,200);

完整的JS代码如下：

上述代码将在画布上绘制如下的一个黑色矩形，从坐标（0，0）处开始，长宽均为200px：

这个矩形是黑色的，因为Canvas所绘制元素的默认颜色是黑色。

,