<canvas>是HTML5里其中一个强大的元素，它能够使用JavaScript来制作图像，动画，游戏，图表，或其它图形类的画像等等。这个教程将描述如何在你的HTML页面中使用<canvas>元素。 这些例子为你提供了一些清晰的思路关于你可以用<canvas>来做什么以及如何开始你自己的实践。这项教程是非常适合所有的初学者，因为它简单，易懂，一学就会。
在我们开始之前，先来看看有哪几个浏览器是支持HTML5<canvas>元素：
Internet Explorer （9.0+）
Safari （3.0+）
Firefox （3.0+）
Chrome （3.0+）
Opera （10.0+）
iOS （1.0+）
Android （1.0+）
<canvas>元素看起来和其它的HTML元素没什么两样。<canvas>元素只有两个属性width和height。必须注意的是，每一次使用的时候都必须设置<canvas>的width和height，那就可以避免在绘制时图像会出现扭曲。
所以在HTML文档里，你的<canvas>元素将会是如下所示：
检查浏览器对<canvas>的支持性，如果浏览器不支持<canvas>就为用户提供替换内容或讯息。
在我们开始画图之前，我们需要了解一下<canvas>的画布坐标（Coordinate System）。如果你在这之前有使用过任何其他2D图形编程语言，那么你应该熟悉标准的笛卡尔（Cartesian）的左上角坐标系统的（0,0），那就是任何图形坐标都是从左上角开始数。例如，如果你想移动一个矩形到右边，那么你就需要增加X轴值; 反之，如果你想把矩形往下移动，那么你就必须增加Y轴值。
我们需要依赖JavaScript来帮助我们在<canvas>画布上绘制图像。<canvas>元素有一个叫做 getContext（） 的方法，这个方法是用来获得渲染上下文（rendering context）和它的绘画功能。getContext（）只有一个参数，那就是上下文的格式（2D, 或3D）。在本教程里，我们只会专注探讨2D的渲染上下文格式。
OK, 我们现在就来开始在空白的<canvas>画布上绘制图形：
保存你的文档，然后使用支持<canvas>的浏览器浏览这个文档，你会看到一个黑色的矩形，如下所示：
上面的脚本中包含一个叫做draw（）的函数。当页面加载结束的时候就会执行这个函数，而这个函数里就有一项由<canvas>提供执行绘制矩形的函数 ——fillRect。fillRect函数包含了四种参数，分别是左上角（x, y，宽度以及高度。如下所示：
很简单对不对？：D 来点更好玩的，让我们继续来改制我们刚创建的矩形。
除了fillRect函数以外，<canvas>也提供了另外两种绘制矩形的方法：分别是strokeRect与clearRect。
‘strokeRect‘函数让我们绘制一个矩形的边框。试看在你的文档里加入strokeRect函数，如下所示：
保存你的文档，然后使用支持<canvas>的浏览器浏览这个文档，你应该会看到如图下所示的那样：
我们为刚创建的矩形加上了边框耶！
那么下一步呢就是使用刚才提到的’clearRect‘。’clearRect‘函数是用来清除指定矩形区域，让清除部分完全透明。试看在你的文档里加入clearRect函数，如下所示：
再次保存你的文档，然后使用支持<canvas>的浏览器浏览这个文档，你应该会看到矩形中间的部分变成白色了，如图下所示的那样：
注：’ strokeRect‘与’ clearRect‘函数具有和’fillRect‘函数一样的参数，那就是（x, y, 宽度， 高度）
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery