今天小编跟大家讲解下有关html5 Canvas画图教程(3)―canvas出现1像素线条模糊不清的原因 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html5 Canvas画图教程(3)―canvas出现1像素线条模糊不清的原因 的相关资料，希望小伙伴们看了有所帮助。
接上一篇canvas画线条教程 上次我们讲到 canvas有时候会出现1像素的线条模糊不清且好像更宽的情况 如下图： 这样的线条显然不是我们想要的。 这篇文章的目的就是弄清楚里面的原理 以及解决它。 大家都知道屏幕上最小的显示尺寸就是1像素 虽然小于1像素的东西可能显示不出来 但计算机可不管 他会试着画一下。 其实像素终究来说也是一个单位 假如我们把画布放大到足够大 足以看清楚每个像素 会是什么情况呢 大概是这个样子： 每个像素都有起止范围 如图所示 他们的范围从左起 跨过1像素 到右止。 如果我们画1像素线条的时候 遵循像素的起止范围 那么我们肯定能得到一个很标准的细线。如下： 但遗憾的是canvas的线条画法不一样 上一篇文章我们已经说了 canvas的每条线都有一条无限细的“中线” 线条的宽度是从中线向两侧延伸的。如果我们还是从第2个像素点画一条线 那么线条的中线就会靠齐到第2个像素的起点 然后我们开始画了 问题也就来了：Canvas 的线条以中线向两侧延伸 而不是向某一边延伸(比如这里 如果只是往右侧延伸 那么我们的问题就不再是问题了) 延伸过后我们的线条实际上是这样的： 此时又有个问题：计算机不允许出现小于1px的图形 所以他做了一个折中的事：把这两个像素都绘制了。 所以 如此一来 本来1px的线条 就成了看起来2px宽的线条。 失败的原因找到了：Canvas中的line把中线与像素的起点对齐了 而不是像素的中间点。 那么我们怎么解决这个蛋疼的问题 也许有人已经想到了：既然是因为两个的起点不一样 那我们就把他们的起点变得一样吧！ 我们让线条的中线和像素的中间点对齐就行了！ 像素的中间点很好找 比如第2像素的中间点 依据图上的解释就是1.5像素的位置 那么x像素的中间点就是(x-0.5)px。 当然 在不很严谨的场合 你使用x+0.5也是可以的。 现在我们在canvas上试试我们的研究结果。 复制代码代码如下: ctx.moveTo(100.5,100.5); ctx.lineTo(200.5,100.5); ctx.lineTo(200.5,200.5); ctx.lineTo(100.5,200.5); ctx.lineTo(100.5,100.5); ctx.closePath(); ctx.lineWidth = 1; ctx.strokeStyle = 'rgba(255,0,0,0.5)'; ctx.stroke(); 看起来对了吧 不过貌似这样一来我们画线的时候就非常纠结 难道每次都去加这个让人郁闷的0.5 当然不是 因为我们大部分时间都是用变量保存值的 就不用给每个值加0.5 了 而且 对于lineWidth>1 的线 我们也不用管它：因为只有线条宽1px的时候 这个问题才最明显。来源：爱蒂网
