Html5 Canvas画线有毛边解决方法

例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A%E9%97%AE%E9%A2%98/


Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按这样的坐标进行线条渲染时所要用到的就是夹缝两边的象素点,这样即便设置了lineWidth为1也将看到两个象素效果的线条,解决方法原象素点+0.5进行偏移。

下面是处理前后的效果比较:




    
    canvasTest
    
    


↓ 处理的  ↓ 普通的  ↓ +0.5偏移的


Html5 Canvas画线有毛边解决方法_第1张图片

你可能感兴趣的:(HTML5-JS,JS)