百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> Html5中Canvas画线有毛边怎样解决-
分享文章到:

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

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

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

  
  
  
      
    canvasTest  
    
    打赏
    



    

打赏

取消

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

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有150人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板