1. 开始使用 canvas 元素

canvas 元素非常简单，这是指它所有的功能都体现在一个JavaScript对象上，因此该元素本身只有两个属性：width 和 height。

canvas 元素里的内容会在浏览器不支持此元素时作为备用内容显示。下面例子展示了canvas 元素和一些简单的备用内容。

使用带有基本备用内容的canvas元素 canvas Your browser doesn't support the canvas element

其显示效果如下：

2. 获取画布上的上下文

为了在canvas元素上绘图，需要获得一个上下文对象，这个对象会开放针对特定图形样式的绘图函数。

通过在DOM里代表canvas元素的对象获得上下文。下表介绍了这个对象：HTMLCanvasElement。

其中关键的方法是getContext。为了获得二维上下文对象，需要给这个方法传递参数2d。一旦得到这个上下文，就可以开始绘图了。

为画布获取二维上下文对象 canvas Your browser doesn't support the canvas element ); ctx.fillRect();

此例中，用document 对象找到DOM里代表canvas元素的对象，并使用参数2d调用了getContext方法得到上下文对象。然后调用 fillRect方法，它会在画布上绘制一个实心矩形。

3. 绘制图形

这里先从canvas对矩形的支持开始。下表介绍了相关方法，所有的这些方法要用在上下文对象上（而不是画布本身）。

所有这三个方法都要四个参数。前两个（如表格所示的x和y）是从canvas元素左上角算起的偏移量。w和h参数指定了待绘制矩形的宽度和高度。

使用fillRect和strokeRect方法 canvas Your browser doesn't support the canvas element ); ; ; ; ){ offset,offset,size,size); ctx.strokeRect(isize,size,size); }

此例中的脚本用fillRect 和strokeRect 方法来创建一系列实现和空心的矩形。

用这种方式编写脚本是为了突出canvas 元素的编程本质。使用JavaScript的for循环绘制这些矩形。其实本可以使用10条独立的语句，每一条都带有特定的坐标参数，但是canvas的一大乐趣就是可以不必这么做。

clearRect 方法会清楚指定矩形里已绘制的所有内容。

使用clearRect方法 canvas Your browser doesn't support the canvas element ); ; ; ; ){ ctx.fillRect(ioffset,offset,size,size); ctx.strokeRect(isize,size,size); ,size,size); }

此例用clearRect方法清楚了之前被fillRect方法绘制过的一片画布区域。从下图可以看到效果：

4. 设置画布绘制状态

绘制操作有绘制状态（drawing state）加以配置。后者是一组属性，指定了从线条宽度到填充色的所有参数。当绘制一个图形时，就会用到绘制状态的当前设置。

在执行操作前设置绘制状态 canvas Your browser doesn't support the canvas element ); ; ctx.strokeRect(); ctx.lineWidth = 4; ctx.strokeRect(); ctx.lineWidth = 6; ctx.strokeRect(); ctx.strokeRect();

此例使用了lineWidth属性，此属性是绘制状态的一部分，负责设置用于图形（比如strokeRect方法生成的那些）的线条宽。当使用strokeRect方法时，lineWidth属性的当前值就会用于绘制矩形。

下表展示了基本的绘制状态属性。

4.1 设置线条连接样式

lineJoin 属性决定了相互连接的线条应该如何绘制，它有三个值：round、bevel和 miter，默认值是miter。

设置lineJoin属性 canvas Your browser doesn't support the canvas element ); ctx.lineWidth = 20; ; ctx.strokeRect(); ctx.lineJoin ; ctx.strokeRect(); ctx.lineJoin ; ctx.strokeRect();

其显示效果如下所示：

4.2 设置填充和笔触样式

当用fillStyle 或strokeStyle 属性设置样式时， 可以用CSS颜色值来指定一种颜色，名称或颜色模型都可以。