除了可以改变颜色，还可以利用lineWidth属性改变描边线条的宽度，按照上面的例子，改变线条宽度：

c.lineWidth = 20; c.strokeStyle = "#f00"; c.strokeRect(50, 50, 100, 100);

结果：

同样的可以改变路径的线宽：

c.lineWidth = 20; c.beginPath(); c.moveTo(50, 50); c.lineTo(50, 250); c.lineTo(250, 250); c.closePath(); c.stroke();

结果：

还有一些其它的改变线条的方式，比如lineCap设置线条的末端，lineJoin设置线条的角。

删除图形

最后我们来了解下如何删除已经绘制的图形，删除图形只需Javascript API提供的一个名为clearRect的方法，其原理是使参数指定的矩形区域背景变为透明。

本文示例画布长宽分别为500像素，要想删除整个画布图形，可以这样做：

c.fillRect(50, 50, 100, 100); c.clearRect(0, 0, 500, 500);

上面的代码执行后，你会什么都看不到，事实上填充的矩形已经绘制，只是瞬间被删除了，所以你看不到它。

如果你不清楚画布的具体宽高，清除整个画布可以这样：

c.clearRect(0, 0, canvas.width, canvas.height); 删除画布中的区域

如果你不想删除整个画布的图形，而仅仅删除画布中的一个区域，假如，你绘制了一个黑色的正方形，旁边绘制了一个红色的正方形：

c.fillRect(50, 50, 100, 100); c.fillStyle = "#f00"; c.fillRect(200, 50, 100, 100);

看起来是这个样子：

接下来你可以通过clearRect删除黑色背景的正方形而只保留红色正方形：

c.clearRect(50, 50, 100, 100);

注意传入clearRect的参数能确保能覆盖要被删除的图形的区域。

结语

canvas易于使用、上手快速，并且强大的要死（唉，自己翻译的文章自己不敢读，太拗口了）

posted on