Html5中Canvas画线有毛边怎样解决-

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

下面是处置先后的结果比拼：

  
  
  
      
      
    
    
    



    

    
打赏
    

    

    	
        
    	

    		
感谢您的支持，我会继续努力的!
    	
    	

    		
    	
    		
扫码打赏，你说多少就多少
    	

    		

	    		
	    		
    		
    		

	    		
	    		
    		
    	
    	

    		
打开支付宝扫一扫，即可进行扫码打赏哦
    		
百分百源码网 建议打赏1～10元，土豪随意，感谢您的阅读！