html5 Canvas画图教程(3)―canvas出现1像素线条模糊不清的原因

名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。

本篇文章的具体介绍如下

接上一篇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();