JavaScript 使用 id 来寻找 canvas 元素：

 然后，创建 context 对象：

下面的两行代码绘制一个红色的矩形： 

 fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

理解坐标

如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

包括前几篇DEMO都涉及了大量的坐标，那这些坐标是如何准备得到的呢，我们实际开发如何得到我们想要的坐标点?下面给出一个获取canvas坐标点的DEMO：

更多 Canvas 实例

下面的在 canvas 元素上进行绘画的更多实例：

实例 - 线条

通过指定从何处开始，在何处结束，来绘制一条线：

JavaScript 代码：

canvas 元素：

 
Your browser does not support the canvas element.
 

亲自试一试

实例 - 圆形

通过规定尺寸、颜色和位置，来绘制一个圆：

JavaScript 代码：

canvas 元素：

Your browser does not support the canvas element.
 

亲自试一试

实例 - 渐变

使用您指定的颜色来绘制渐变背景：

JavaScript 代码：

canvas 元素：

Your browser does not support the canvas element.
 

亲自试一试

实例 - 图像

把一幅图像放置到画布上：

JavaScript 代码：

canvas 元素：

Your browser does not support the canvas element.
 

亲自试一试

 小结：

通过几篇对Canvas API的学习，知道它的强大和方便，虽然这只是涉及到它使用的一些基本知识，关于canvas 的使用一本书可能还说不完，只能算是抛个砖引个玉吧。在以后用到的时候通过积累慢慢熟悉它。相信它是以后网页游戏发展的一个新趋势。