已解决canvas画图模糊的问题
来源:互联网 发布:淘宝买的固话办信用卡 编辑:程序博客网 时间:2024/05/14 11:55
说明:转自:http://blog.csdn.net/leyyang/article/details/52245445
在说解决办法之前,例行惯例,简要的说明一下Html5中的Canvas。Canvas是Html5制图中常用的元素,但其本身并没有绘制能力,它仅仅是图形的容器,要制图还必须依靠脚本。按照Canvas中提供的方法,我们绘制出各种我们想要的图形,本来说这样就已经很棒了,但是有一个致命因素让人很心塞。对美观比较讲究的同学几乎不能忍这个因素,就是绘制的图无比的模糊!!!
所以本人在研究过各种办法,也用过国外大神的库hidpi-canvas-polyfill,但也遇到了一些很难避免的问题。于是经过几次尝试之后,最终采用了一种简单粗暴的办法:将canvas绘制过程放大2倍,然后将整个canvas元素或者其父元素缩小两倍。
我们先看一个没有做过处理的栗子,我们可以看到该栗子画出来的圆,那叫一个模糊,巨丑啊。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
下面我们再来看看,做放大处理然后再缩小的效果。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
我们再看效果,画出来的图是不是细腻了许多。
这里我们有几点需要注意:
- canvas元素的宽和高为之前的两倍
- 使用ctx.scale(2,2)将绘图放大两倍
- 在父元素中添加的class中有放大缩小元素的zoom属性,0.5为缩小一倍。当然你也可以用css3中的transform:scale(0.5,0.5)的办法去缩小,只是使用这种方法不会改变布局大小,即canvas虽然视觉上变小了,但它仍旧会占两倍的高和宽。
阅读全文
0 0
- 已解决canvas画图模糊的问题
- 解决canvas画图模糊的问题
- canvas画图模糊问题
- HTML5使用canvas画图时,图片被自动放大模糊的问题.....
- html5 Canvas画图3:1像素线条模糊问题
- HTML5中Canvas画图片的问题
- html5 canvas绘制图片模糊的问题
- html5 canvas绘制图片模糊的问题
- canvas 绘图出现模糊问题的解决方法
- canvas绘制出现模糊的问题
- 使用canvas画图,图形模糊怎么办
- 解决canvas getimagedata 跨域问题[已解决]
- 安卓Canvas 画图清除之前的轨迹问题
- 解决JSChart画图不支持中文的问题
- 实现简单的Canvas画图
- canvas画图的一个坑
- 我的问题已解决
- 解决win2003中看电影模糊的问题
- 判断是否为ie
- html table标签
- tableau-help文档的常规函数查询
- angualrjs的不同控制器里的数据共享和交互
- Win10 磁盘占用100%的解决方案
- 已解决canvas画图模糊的问题
- Jacoco覆盖率信息收集1
- 需求分析与系统设计
- 检测网站是否开启SSH服务
- Spring boot 自定义统一异常处理(以及规范响应格式)
- 正则表达式的经典实例
- python的list和javascript的array的方法
- 操作符简述
- JAVA中如何判断文件或文件夹是否存在