canvas 绘图出现模糊问题的解决方法
来源:互联网 发布:淘宝旺旺号在哪里登录 编辑:程序博客网 时间:2024/05/16 08:22
有一种说法是说因为绘制的坐标不是整数级的坐标,所以会变得模糊,所以在计算坐标的时候可以使用 Math.floor 将坐标取整,这样绘制就会变得清晰。
个人觉得这种说法并不实际,因为在实现的时候就是要计算到每个点每条线的具体位置,角度等等的精确值,这样粗糙的取整,会使得绘制出来的整体跟设计图上有比较大的出入,而且本身也无法维护让每次绘制都是在整数级的坐标上,比如绘制一个圆,要如何让每个点都是在整数坐标的像素点上?
还有一种方法比较简单,容易实现,而且效果在目前看来还是不错的。
先补充说明一个基础知识点,在使用 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的画布,可以这样写:
<canvas width="200" height="400" style="width: 100px;height: 200px;"></canvas>
如此就相当于画了一张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 绘图出现模糊问题的解决方法
- canvas绘制出现模糊的问题
- cocos2dx js 关于canvas绘图模糊问题及解决办法
- cocos2dx js 关于canvas绘图模糊问题及解决办法
- cocos2dx js 关于canvas绘图模糊问题及解决办法
- 模糊查询中出现的问题及解决方法
- html5 canvas绘制图片模糊的问题
- html5 canvas绘制图片模糊的问题
- 解决canvas画图模糊的问题
- 已解决canvas画图模糊的问题
- 移动端canvas出现锯齿和文字模糊问题
- 请教关于canvas绘图的问题
- canvas画图模糊问题
- canvas绘图在高清屏显示模糊
- canvas的drawimage使图片失真变模糊的解决方法
- 在discuz上实现模糊查询出现的问题及解决方法
- mybatis 在name 模糊查询时出现问题以及解决方法
- SWT的Canvas绘图
- float
- Lecture3: Evaluation
- android热修复--手写热修复
- SonicOperator之算法优化2
- ubuntu 16.04 源码安装 nginx
- canvas 绘图出现模糊问题的解决方法
- Mac OS 10.13 High Sierra beta 测试版 离线系统镜像dmg
- [一天几个linux命令] Linux的账号与群组
- 单链表基础面试题
- Linux----子进程的异步等待方式
- Linux中select实现高性能服务器以及与多进程服务器对比
- 理解根目录下的build.gradle
- 小小感想
- cuFFT