canvas画布解决1px线条模糊问题

首先我们要了解这几个属性，他们是用来设置线条样式的。

    lineWidth = value    设置将来绘制的线条的宽度。

    lineCap = type    设置行尾的外观。

    lineJoin = type    设置线条相交处“拐角”的外观。

    miterLimit = value    当两条直线以锐角连接时，建立一个尖角的限制，让您控制交界处变厚的程度。

    getLineDash()    返回包含偶数个非负数的当前行破折号模式数组。

    setLineDash(segments)    设置当前的线条样式。

    lineDashOffset = value    指定在一条线上开始一个破折号阵列的位置。

用来设置线条宽度的属性就是上面的lineWidth = value；

    首先我们要了解物理像素在屏幕上是以网格的形式出现的，如下图所示。如果我们填充（2,1）到（5,5）的矩形，它们之间的整个区域（浅红色）落在像素边界上，所以得到的填充矩形将具有清晰的边缘。

    但是，如果我们设置1px的线条，画在（3,1）到（3,5）的坐标上，则可以得到第二个图像中的情况。实际要填充的区域（深蓝色）仅延伸到路径任一侧的像素的一半。必须渲染一个近似值，这意味着这些像素只是部分阴影，并导致整个区域（浅蓝色和深蓝色）填充的颜色只有实际笔触颜色的一半。1.0前面的示例代码中的宽度线会发生这种情况。

像素块

    为了解决这个问题，你必须在创建路径时非常精确。知道1.0宽度线将延伸半个单位到路径的任一侧，创建从（3.5,1）到（3.5,5）的路径导致第三个图像中的情况 -1.0线宽完全并精确地填充一个像素的垂直线。

    我们用实际例子来看一看：

在canvas上画一条1px宽度的线条

代码如下：

var canvas = document.getElementById('tutorial17');

if (canvas.getContext) {

        var ctx = canvas.getContext('2d');

        ctx.lineWidth = 1;

        ctx.beginPath();

        ctx.moveTo(55.5, 5);

        ctx.lineTo(55.5, 140);

        ctx.stroke();

}else{

        console.log('浏览器不支持canvas')

}

效果图如下：

这是定位到半像素的时候，无模糊感

VS：

1px线条定位到，整像素坐标上

效果图如下：

出现模糊

        总结：以上就是解决1像素宽度的线条带来的模糊，解决办法是在定位的时候平移半个像素就可以。但是：对于宽度较宽的线条，每一半都是像素的整数，所以您需要一个位于像素之间（即（3,1）到（3,5））的路径，而不是像素的中间。