Canvas Demo 1

先看图：

这个例子有三个个细节，请细看第一个path：

1. 横线的lineCap不是round，而竖线是round

2. 竖线比横线粗一倍

3. lineJoin是个直角（也许你不觉得这是什么问题，继续往下看吧）

关键的处理在于moveTo(x, y)：

1. 只要保证x是0，横线的lineCap就是butt。如果移到(50, 50)，那两条线都是round了

2. 只要保证y是0，竖线就会比横线粗一倍，因为lineWidth属性是以绘制的像素线为中心线的，比如从(0,10)画到(10, 10)，这条线就是中心线（不计粗细），如果lineWidth为10，那就上下各分得5px。例子中第一个path的横线y坐标为0，所以被截断了一半。

3. 同样的道理，lineJoin也被截断了
 

画法：先按 lineWidth=50 和黑色进行 stroke()，再按 lineWidth=1 和白色在相同的路径进行stroke()，可得如下结论：

1. lineCap属性表示从结束点向外延伸的样式，我们的x坐标从0开始的话，0坐标的部分（也就是向外延伸的部分）是看不见的，不论设置成什么值，看起来都是butt

2. lineJoin为bevel时，白色线相交点和斜角的两端可构成一个直角三角形，所以就出现了本例中 y为0时，完全看不到斜角的情况

代码如下：

context.lineWidth  = 10;

context.lineJoin  = 'bevel';

context.lineCap  = 'round';

context.beginPath();

context.moveTo(0, 0);

context.lineTo(25, 0);

context.lineTo(25,25);

context.stroke();

context.closePath();



context.beginPath();

context.moveTo(10, 50);

context.lineTo(35, 50);

context.lineTo(35,75);

context.stroke();

context.closePath();



context.lineJoin  = 'round';

context.lineCap = 'butt';

context.beginPath();

context.moveTo(10, 100);

context.lineTo(35, 100);

context.lineTo(35,125);

context.stroke();

context.closePath();