利用HTML5 Canvas API绘制矩形的超级攻略_html5教程技巧

2. "en">
4. "UTF-8">
9. "zh">
11. "UTF-8">
16. "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
17. 你的浏览器居然不支持Canvas？！赶快换一个吧！！

运行结果：

乍一看没啥问题，但是视力好的童鞋已经发现了，最后一笔闭合的时候有问题，导致左上角有一个缺口。这种情况是设置了lineWidth导致的。如果默认1笔触的话，是没有问题的。但是笔触越大，线条越宽，这种缺口就越明显。那么这种情况该怎么避免呢？
标题已经剧透了，使用clothPath()闭合图形。

2. "zh">
4. "UTF-8">
9. "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
10. 你的浏览器居然不支持Canvas？！赶快换一个吧！！

运行结果：

这个例子结合上节课的讲解，我们知道了绘制路径的时候需要将规划的路径使用beginPath()与closePath()包裹起来。当然，最后一笔可以不画出来，直接使用closePath()，它会自动帮你闭合的。(所以如果你不想绘制闭合图形就不可以使用closePath())

给矩形上色
这里我们要介绍一个和stroke()同等重要的方法fill()。和当初描边一样，我们在填色之前，也要先用fillStyle属性选择要填充的颜色。
比如我们要给上面的矩形涂上黄色，可以这样写。

2. "zh">
4. "UTF-8">
9. "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
10. 你的浏览器居然不支持Canvas？！赶快换一个吧！！