1 2 ctx.ctx.

就会得到下面的图形：

fillStyle和strokeStyle支持普通css的颜色值，可以是rgb，rgba，hsa，颜色名称或者16进制编码。

需要注意的是，我们改变canvas的颜色并不会影响之前已经画了的图形。你画了一个黑色的矩形，然后改变颜色为红色，又花了一个红色的矩形，那么第一个矩形依然是黑色，不影响。

改变线的宽度

除了改变颜色，你还可以改变线的宽度。你需要调用lineWidth这个属性。

1 2 3 ctx.ctx.ctx.

就会看到下面的图形：

这个方法对于路径也是同样有用的：

1 2 3 4 5 6 7 ctx.ctx.ctx.ctx.ctx.ctx.ctx.

就会得到下面这个更粗边框的三角形：

API还提供了一些其他的方法。比如：lineCap会改变线的末端的样子，lineJoin会改变线的拐角的样子。你可以在查看更多的文档。

擦除Canvas

最后还要知道的就是如何擦除Canvas。你已经学习了如何在画布上画出图形，当然也需要知道怎么清除他们，这也很有用。

还好，擦除Canvas还是比较简单的，只需要调用一个API就行了，clearRect，他会负责让每个点都透明。

在这篇文章中，我们的画布是500X500的，所以你可以这样子直接清除：

1 2 ctx.ctx.

这里截图就没意义了，如果成功执行的话，你的画布就是空的了。这个方法的参数跟fillRect的参数意义是一样的。如果你不是很确定canvas的尺寸，那么也可以写成这样：

1 ctx.canvas.

擦除canvas的一小部分

如果你不想擦除整个canvas，那就不要那么做。你可以只擦除一小部分。想象你有一个黑色的方块，然后旁边有个红色的方块。

1 2 3 ctx.ctx.ctx.

看起来就是这样的：

你可以擦除黑色的方块，然后留下红色的：

1 ctx.

注意调用这个方法的时候，传入的参数就跟画黑方块的一样。然后就可以看到：

很简单，不是么，清除画布跟画图会用的一样多，而且在后面RockUX的教程中你会了如何画动画的时候，清除会用的非常多。

总结

可以看到，Canvas是浏览器中非常特别的一部分。通过它，你可以自己画出图形，只需要写JS，而且不用加载插件。很简单，也很好学，你把他发挥到极致的时候也会非常的有用。

在RockUX.com后面的文章中，你会看到一些Canvas的高级用法，比如画圆，画曲线，而且这还不是全部，还有如果修改图片等等。

计算你不打算马上使用Canvas，你也应该了解一下，这在将来是非常有用的东西。

觉得文章有用？立即： 和朋友一起 共学习 共进步！

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习