head 部分中，或者放在外部文件中。
2D context API
介绍了如何创建 canvas 后，让我们来看看 2D canvas API，看看能用这些函数做些什么。
基本线条
上面的例子中展示了绘制矩形是多么简单。
通过 fillStyle 和 strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和 十六进制数、()、() 和 ()（ 若浏览器支持，如 Opera10 和 Firefox 3)。十六进制数、()、() 和 ()（ 若浏览器支持，如 Opera10 和 Firefox 3)。
通过 fillRect 可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。如果想清除部分 canvas 可以使用 clearRect。上述三个方法的参数相同：x, y, width, height。前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度。
可以使用 lineWidth 属性改变线条粗细。让我们看看使用了fillRect,strokeRect clearRect 和其他的例子：
context.fillStyle = '#00f'; // blue context.strokeStyle = '#f00'; // red context.lineWidth = 4; // Draw some rectangles. context.fillRect (0, 0, 150, 50); context.strokeRect(0, 60, 150, 50); context.clearRect (30, 25, 90, 60); context.strokeRect(30, 25, 90, 60);此例子效果图见图1.
图 1: fillRect, strokeRect 和
clearRect效果图路径
通过 canvas 路径（path）可以绘制任意形状。可以先绘制轮廓，然后绘制边框和填充。创建自定义形状很简单，使用
beginPath()开始绘制，然后使用直线、曲线和其他图形绘制你的图形。绘制完毕后调用fill和stroke即可添加填充或者设置边框。调用closePath()结束自定义图形绘制。下面是一个绘制三角形的例子：
// Set the style properties. context.fillStyle = '#00f'; context.strokeStyle = '#f00'; context.lineWidth = 4; context.beginPath(); // Start from the top-left point. context.moveTo(10, 10); // give the (x,y) coordinates context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); // Done! Now fill the shape, 和 draw the stroke. // Note: your shape will not be visible until you call any of the two methods. context.fill(); context.stroke(); context.closePath();其效果图见图2.
图 2: 三角形
另一个较负责的例子中使用了直线、曲线和圆弧。
插入图像
