首先我们要了解这几个属性，他们是用来设置线条样式的。
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））的路径，而不是像素的中间。
网友评论