canvas绘制出现模糊的问题
来源:互联网 发布:办淘宝卡那里办 编辑:程序博客网 时间:2024/05/01 11:34
方法比较简单,容易实现,而且效果在目前看来还是不错的。
先补充说明一个基础知识点,在使用 canvas 的时候,要设置画布的大小,要使用的是 canvas 的 width 与 height 属性,而不是设置 canvas 的 style 或者CSS样式中的 width 与 height 。
因为在绘制的过程中画布内容的实际大小是根据 canvas 的 width 与 height 属性设置的,而 style 或者CSS设置的width 与 height 只是简单的对画布进行缩放。
这里可以将 canvas 比喻为一个 img ,其中画布的 width 与 height 属性,相当于 img 中图片的原始尺寸;我们使用JS在画布上绘制的内容对应的就是 img 中的图片;而 style 或者CSS设置的 width 与 height ,就是设置 canvas 或者 img 在页面上要显示的大小。
因此这里要解决模糊的做法,就是将这张“图片”变得高清一点,然后缩小了来显示。具体实现就是将画布的大小设置为实际显示大小的两倍,然后在canvas的css属性设置正常显示的宽高,比如,要显示一个100*200的画布,可以这样写:
如此就相当于画了一张200*400的图片,然后设置他显示成100*200的大小,这样一来就变得清晰了。需要注意的是,这样将画布放大之后,绘制的过程中对应的那些坐标,长度等等都要相应的放大,比如原本在100*200的画布上绘制 ctx.arc(10,10,5,0,Math.PI*2) ,现在在200*400的画布上就得改成 ctx.arc(20,20,10,0,Math.PI*2) 。如此修改后的效果如下两张截图:
- canvas绘制出现模糊的问题
- html5 canvas绘制图片模糊的问题
- html5 canvas绘制图片模糊的问题
- canvas 绘图出现模糊问题的解决方法
- Canvas-drawImage 绘制图片模糊问题
- Canvas绘制图片模糊
- canvas绘制圆环进度条出现模糊效果解决方案
- android Canvas绘制图片模糊
- 为什么canvas绘制的线条会模糊、有锯齿?
- 解决canvas画图模糊的问题
- 已解决canvas画图模糊的问题
- 移动端canvas出现锯齿和文字模糊问题
- canvas画图模糊问题
- canvas绘制图像或者文字时模糊
- 关于canvas在retina屏下绘制文字或图像模糊的解决方案
- 关于canvas在retina屏下绘制文字或图像模糊的解决方案
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Canvas 在高清屏下绘制图片变模糊的解决方法
- datatable+icheck th与td不对齐
- Scala 2.8 breakOut
- 二叉树的序列化和反序列化
- Cookie
- android 如何隐藏ActionBar
- canvas绘制出现模糊的问题
- 新闻文体2
- 2017丝绸之路国际博览会暨第二十一届中国东西部合作与投资贸易洽谈会会刊(参展商名录)
- 10月26日云栖精选夜读:如何让数据价值最大化?阿里全域大数据系统深度解读
- Qt5--QSS(二)知识总结
- 内部类
- c/c++ 时间函数 localtime 坑
- 升级Studio3.0的一个问题
- mysql计算当前日期上一周的开始日期与结束日期