html5 Canvas绘图教程(3)—canvas呈现1像素线条恍惚不清的缘故起因

发布时间：2020-09-23 22:06:05 所属栏目：编程来源：网络整理

导读：前次我们讲到，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的时辰，这个题目才最明明。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys