}
}
可以把上面代码放置在文档
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
