H5 canvas绘制出现模糊的问题
在之前做移动端小游戏幸运转盘、九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现。
近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的怎么会模糊,先前也有考虑到适配不同尺寸的移动设备,担心直接使用 img 或者设置 background 会使图片拉伸而变得模糊,所以使用 canvas 来绘制转盘与九宫格,精确的计算每个物体所在的坐标以及尺寸绘制出来的,怎么会模糊。
然而将绘制的内容与页面中的其他文字或者图片作对比后,发现使用 canvas 绘制输出的确实比直接使用标签输出的来的模糊,如下两张截图:
可以看出转盘中或者九宫格中的图片跟蚊子,明显与下面直接使用HTML标签显示的文字来的模糊。
在网上查了下 canvas 模糊的问题,确实存在,也有不少的解决方法。
有一种说法是说因为绘制的坐标不是整数级的坐标,所以会变得模糊,所以在计算坐标的时候可以使用 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) 。如此修改后的效果如下两张截图:
现在相比之前,明显清晰了许多,画布中的文字和图片与下面HTML标签直接输出的一样清楚,模糊的问题解决了,不会再觉得是撸多了,眼睛花。
另外,如果要比较好的解决canvas模糊的问题,可以使用JS类库 hidpi-canvas-polyfill 来解决,由于我也没试过,就不多说了,想了解的可以查看html5 canvas绘制图片模糊的问题,这里有介绍这个插件的使用方法。
This entry was posted in CANVAS, CSS, H5 & CSS3, HTML, HTML5, JavaScript, JS, Web, 总结归纳 and tagged CANVAS, CSS,H5,HTML5,JS, HTML, JavaScript, WEB, 总结归纳. Bookmark the permalink.
H5 canvas绘制出现模糊的问题的更多相关文章
- Canvas绘制图片模糊
canvas是html5的新标签,是个可以绘制图形的画布,画布的默认大小为300x150.在自定义绘制画布大小的时候有注意的问题,就是用样式来设置高度和宽度的时候 比如 <div style=& ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
- H5 canvas 解决合成图模糊(canvas真机下scale不起作用,无法缩放显示的问题)
在解决canvas合成图片模糊的问题想必我们已经了解了 window.devicePixelRatio window接口的devicePixelRatio返回当前显示设备的物理像素分辨率与C ...
- h5学习-canvas绘制矩形、圆形、文字、动画
绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- h5 canvas 画图
h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- canvas绘制清晰的方法
很早就开始使用canvas,包括自己绘制各种图形,以及作为画布提供给诸如echarts,当canvas绘制细线条,特别是关于文字绘制会出现很模糊或者锯齿的感觉. <canvas ref=&quo ...
- HTML5 canvas 绘制五星红旗
这个例子并不是自己写的,在网上找的案列,仿照写的,,,自己真的公布董这些算法,看完这个例子还是有一点模糊,,, 如果谁看的比较明白,指点一下,,,多谢!!!! <!doctype html> ...
- HTML5—canvas绘制图形(1)
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...
- canvas 绘制图形
canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...
随机推荐
- IOS内存警告处理
IPhone下每个app可用的内存是被限制的,如果一个app使用的内存超过20M,则系统会向该app发送Memory Warning消息.收到此消息后,app必须正确处理,否则可能出错或者出现内存泄露 ...
- iOS 秒数转换成时间,时,分,秒
//转换成时分秒 - (NSString *)timeFormatted:(int)totalSeconds{ int seconds = totalSeconds % 60; int min ...
- iOSQuartz2D-02-绘制炫酷的下载进度条
效果图 实现思路 要实现绘图,通常需要自定义一个UIView的子类,重写父类的- (void)drawRect:(CGRect)rect方法,在该方法中实现绘图操作 若想显示下载进度,只需要实例化自定 ...
- onmousedown,onmouseup,onclick同时应用于一个标签节点Element
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- .net程序员工作两年总结
(2015年9月) 最近换了工作,面试了很多家公司想总结下,以便以后回顾知道自己是怎么走过来的. 入行背景: 我是半路转行做软件开发的,2011年7月大学专科毕业,大学专业是:机械制造及其自动化:20 ...
- 使用网站websequencediagrams在线画时序图
在线画时序图的网站:https://www.websequencediagrams.com/ 该网站提供拖拉图形和编写脚本代码2个方式来制作时序图,同时提供多种显示风格. 实例: 1.脚本代码: ti ...
- Effective Java 42 Use varargs judiciously
Implementation theory The varargs facility works by first creating an array whose size is the number ...
- 在Web api2 中传递复杂参数的一点心得
这两天在做的一个项目基于webapi2,期间遇到了复杂参数传递的问题.其中刚好看到园友的这篇文章,但是我测试收结果是失败的,还不知道是什么原因.最终经过思考后,找到了一种方法,和大家分享下. 在前端我 ...
- MongoDB学习笔记——数据库安装及配置
MongoDB数据库安装 MongoDB官方下载地址:https://www.mongodb.com/download-center 首先需要根据Windows版本选择正确的MongoDB版本进行安装 ...
- docker-4 Dockerfile的使用
Dockerfile FROM 基础镜像 MAINTAINER 维护这信息 RUN 运行什么命令,在命令前面加上RUN ADD 往里面加点文件,copy文件,会自动 ...