如果我想Canvas里面的边线也和PS这种一样，有没有办法呢？当然有，就是lineJoin属性。
lineJoin，意思即线的交汇处，有3个属性：miter(默认，尖角)，bevel（斜角）,round（圆角），如图6：

毫无疑问我们一下就能明白我们的矩形用的是尖角，所以试着把他改成圆角看看：

图形变成了这样，图7：

另外，通过前面图我们了解到，Canvas的线条端点是平的，可不可以改呢？毕竟平的不好看。

也是可以的，即lineCap属性，这个就是定义线条的端点。lineCap有3个值：butt（平，默认）,round（圆）,square（方），如图8

看图就能发现，其实平头跟方头是一样的，区别只是平头没有伸出去那么一截。圆头和方头都会伸出去一截，这一节是多长呢？就是线条宽度的一半。

你有没有想到什么？哈哈，前面的闭合路径的问题，如果我们把lineCap设为方头，效果也是一样的！

但为了保险起见，我们还是要把路径闭合了，切记！

常识提醒：闭合的路径没有端点！所以闭合的路径上看不到端点的样式。

PS：lineCap与lineJoin有点相似，注意不要搞混。

-----------------------后记------------------------------

如果你眼尖并且运气不好，你可能会发现有时候1像素的线条不是1像素宽，好像要宽一些，模糊一些。如图9：

恭喜你!你遇到了一个不是bug的bug。这个有点特别，我留到下一篇文章写吧。

原文