canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形，在页面上放置一个canvas元素，就相当于在页面上放置一块“画布”，可以在其中进行图形的描绘。

canvas元素只是一块无色透明的区域。需要利用JavaScript编写在其中进行绘画的脚本。从这个角度来说，您可以理解为类似于其它开发语言中的canvas画布。

canvas元素要求至少设置width和height特性，以指定要创建的绘图区域大小。任何在起始和结束标签之间的内容是候选内容，它们当浏览器不支持<canvas>元素的时候便会显示。例如：

<canvas>A drawing of something.</canvas>

和其它元素一样，width和height他特性也可以作为DOM元素对象的属性使用，可以在任何时刻更改。整个元素也可以使用CSS定义样式。

开始在画布上绘图之前，要先取得绘图的环境。canvas元素正式支持一个2D绘图环境。绘图环境的引用可以使用getContext()方法获取，要传入一个“2D”参数，如下：

var drawing = document.getElementById("drawing"); //确保支持<canvas> if (drawing.getContext) { var context = drawing.getContext("2d"); //其它代码 }

当使用canvas元素时，一定要测试getContext()方法是否存在。有些浏览器会为非正式的HTML元素创建默认的HTML元素对象。这种情况下，getContext()方法就不可用了，会造成脚本执行错误。

1.canvas绘制长方形

2D绘图环境的原点（0，0）在元素的左上角，坐标值都是相对于该点计算的。默认情况下，width和height即宽和高，表示了在各方向上有多少个像素。

唯一的一个可以直接在2D绘图环境中绘制的图形就是长方形。长方形有三个方法：fillRect()、strokeRect()和clearRect()。三个方法都接受四个参数：长方形的x坐标、y坐标、宽和高。参数的单位是像素。

fillrect填充色彩是使用fillStyle属性指定的，它一开始等于黑色（“#000000”）。可以将该属性设置为以六位十六进制数指定的任意色彩，或者使用CSSrgb()或者rgba()格式。如下例：

var drawing = document.getElementById("drawing"); //确保完全支持<canvas> if (drawing.getContext) { var context = drawing.getContext("2d"); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 200, 200); //绘制一个红色的长方形 context.fillStyle = "#ff0000"; context.fillRect(10, 10, 50, 50); //绘制一个半透明的蓝色长方形 context.fillStyle = "rgba(0, 0, 255, 0.5)"; context.fillRect(30, 30, 50, 50); }

该代码首先将fillStyle设置为红色，然后在（10，10）绘制了一个50像素高和宽的长方形。然后，又使用rgba()格式将fillStyle设为一个半透明的蓝色，并画了另一个长方形覆盖了第一个。结果可以看到红色和蓝色长方形中间接在一起。

strokeRect()方法使用由strokeStyle属性指定的颜色绘制了一个长方形外框。和fillStyle属性一样，strokeStyle默认为“#000000”，并可以使用十六进制值、rgb()或者rgba()设置。如下例：

var drawing = document.getElementById("drawing"); //确保完全支持<canvas> if (drawing.getContext) { var context = drawing.getContext("2d"); //填充画布 context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 200, 200); //绘制一个红色的长方形边框 context.strokeStyle = "#ff0000"; context.strokeRect(10, 10, 50, 50); //绘制一个半透明的蓝色长方形边框 context.strokeStyle = "rgba(0, 0, 255, 0.5)"; context.strokeRect(20, 30, 50, 50); }

这段代码也绘制了两个重叠的长方形；不过，都只是边框而不是填充的长方形。

画笔的大小是由lineWidth属性控制的，可以设置为任意整数。类似还有，lineCap属性描述了在线段终点所使用的形状（“butt”、“round”或者“square”），lineJoin表示线段如何连接（“round”、“bevel”或“miter”）。

可以使用clearRect()方法清除画布的一块区域。该方法用于让一块绘图环境变透明。通过绘制图形然后清除指定区域，就可以创建有趣的效果，比如切掉另一个形状的一部分。如下例：

var drawing = document.getElementById("drawing"); //确保完全支持<canvas> if (drawing.getContext) { var context = drawing.getContext("2d"); //填充画布 context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 200, 200); //绘制一个红色的长方形 context.fillStyle = "#ff0000"; context.fillRect(10, 10, 50, 50); //绘制一个半透明的蓝色长方形 context.fillStyle = "raba(0, 0, 255, 0.5)"; context.fillRect(30, 30, 50, 50); //创建一个覆盖前面长方形的长方形 context.clearRect(40, 40, 10, 10); }

这里有两个填充的相互覆盖的长方形，然后另一个小长方形清除了中间的覆盖区域。

2.canvas绘制路径

2D绘图环境支持一些在画布上绘制路径的方法，可以创建复杂的形状和线条。要开始创建路径，必须首先调用beginPath()表示新路经开始。然后，可以调用以下方法创建路径。

一旦创建好路径之后，还可以调用fill()方法用fillStyle填充色。另外一个选项调用stroke()方法对路径描边，使用strokeStyle()。最后一个选项是调用clip()，根据路径创建一个裁剪区域。

请看下面绘制一个钟（不带数字）的例子：

var drawing = document.getElementById("drawing"); //确保完全支持（canvas） if (drawing.getContext) { var context = drawing.getContext("2d"); //填充画布 context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 200, 200); //路径开始 context.beginPath(); //绘制外圆 context.arc(100, 100, 99, 0, 2 * Math.PI, false); //绘制内圆 context.moveTo(194, 100); context.arc(100, 100, 94, 0, 2 * Math.PI, false); //绘制分针 context.moveTo(100, 100); context.lineTo(100, 15); //绘制时针 context.moveTo(100, 100); context.lineTo(35, 100); //路径描边 context.stroke(); }