Canvas 4 线形 line style

这篇主要介绍通过一系列属性来设置线的样式

主要包括以下属性：

lineWidth = value

• 设定当前线条的粗细（默认为1.0）
• 这里需要注意一个问题，在绘制线条的时候，给定的线宽，实质上值得是给定路径的中心到两边的粗细，通俗的讲就是，路径的两边各绘制线宽的一半。
• 同时画布的坐标并不和像素直接对应，当需要精确的水平或者垂直线的时候需要注意。
• 下面范例中，奇数的线画的都比较模糊不清，不能精确呈现，这是路径定位问题。

范例１：

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i = 0; i < 10; i++){
    ctx.lineWidth = 1+i;
    ctx.beginPath();
    ctx.moveTo(5+i*14,5);
    ctx.lineTo(5+i*14,140);
    ctx.stroke();
  }
}
draw();

这里进一步讨论一下上述提及的问题，为什么奇数的线条绘制会出现模糊不清的原因。首先要先明确一个问题，canvas的坐标系统跟pixel不是一一对应的。如下图所示，网格中一格表示的是一个pixel，如果 fillRect（2,1,3,4），刚好完整的覆盖一个12格的矩形。

如果使用者想画一条线，那这个线经过,这个线经过３，１，到３，５。宽度为１，那么这个线会是怎么样的呢？

从上图我们就能观察到，深蓝色使我们实际需要的那个宽度为1的线，可是pixel并不能一半上色一半不上色，那么在实际过程中你会得到的是用一半的颜色填充那一半不需要上色的pixel，就会得到奇数宽度不准确的原因了。

要解决这个问题，必须对路径进行精确的控制，让边缘刚好落在像素边界。

修改一下code，这样看起来是不是清晰多了。左边是修改后的，右边是没有修改的

lineCap = type

设定线条末端样式,有下图中三种，分别是 butt，round，square，默认是 butt。图中蓝色的线是起终点的辅助线。

• round就是在起终点都加上一个直径为线宽的半圆。
• square就是在起终点加上一个高度为线宽一半的方块。

lineJoin = type

设定线条与线条间接合处样式,同样有三种，下图中依序是 round，bevel，miter，默认是miter。miter会受到miterLimit的限制。miterLimit = value