作者:李小白无悔 | 来源:互联网 | 2020-08-22 10:49
Html5Canvas所有的画线指令画出来的线条都有毛边(比如lineTo,arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按这样的坐标进行线条渲染时所要用到的就是夹缝两边的象素点,这样即便设置了lineWidth为1也将看到两个象素效果的线条,解决方法原象素点+0.5进行偏移。
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按这样的坐标进行线条渲染时所要用到的就是夹缝两边的象素点,这样即便设置了lineWidth为1也将看到两个象素效果的线条,解决方法原象素点+0.5进行偏移。
下面是处理前后的效果比较:
↓ 处理的 ↓ 普通的 ↓ +0.5偏移的
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线_html5教程技巧
以上就是Html5中Canvas画线有毛边如何解决的详细内容,更多请关注 第一PHP社区 其它相关文章!