详解Html5 Canvas画线有毛边解决方法

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持潘少俊衡。