DDR爱好者之家 Design By 杰米
接上一篇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的时候，这个问题才最明显。
上次我们讲到，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的时候，这个问题才最明显。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
暂无评论...
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年12月28日
2024年12月28日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果（九）》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]