使用canvas画图,图形模糊怎么办
来源:互联网 发布:模糊算法的c语言实现 编辑:程序博客网 时间:2024/05/29 03:56
在说解决办法之前,例行惯例,简要的说明一下Html5中的Canvas。Canvas是Html5制图中常用的元素,但其本身并没有绘制能力,它仅仅是图形的容器,要制图还必须依靠脚本。按照Canvas中提供的方法,我们绘制出各种我们想要的图形,本来说这样就已经很棒了,但是有一个致命因素让人很心塞。对美观比较讲究的同学几乎不能忍这个因素,就是绘制的图无比的模糊!!!
所以本人在研究过各种办法,也用过国外大神的库hidpi-canvas-polyfill,但也遇到了一些很难避免的问题。于是经过几次尝试之后,最终采用了一种简单粗暴的办法:将canvas绘制过程放大2倍,然后将整个canvas元素或者其父元素缩小两倍。
我们先看一个没有做过处理的栗子,我们可以看到该栗子画出来的圆,那叫一个模糊,巨丑啊。
<!DOCTYPE html><html><body><canvas id="myCanvas" width="400" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.beginPath();ctx.fillStyle="yellow";ctx.arc(200,150,100,0,2*Math.PI);ctx.stroke();ctx.fill();</script> </body></html>
下面我们再来看看,做放大处理然后再缩小的效果。
<!DOCTYPE html><html><head> <style> .container{ zoom:0.5; } </style></head><body><div class="container"> <canvas id="myCanvas" width="800" height="600" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas></div><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.scale(2,2);ctx.beginPath();ctx.fillStyle="yellow";ctx.arc(200,150,100,0,2*Math.PI);ctx.stroke();ctx.fill();</script> </body></html>
我们再看效果,画出来的图是不是细腻了许多。
这里我们有几点需要注意:
- canvas元素的宽和高为之前的两倍
- 使用ctx.scale(2,2)将绘图放大两倍
- 在父元素中添加的class中有放大缩小元素的zoom属性,0.5为缩小一倍。当然你也可以用css3中的transform:scale(0.5,0.5)的办法去缩小,只是使用这种方法不会改变布局大小,即canvas虽然视觉上变小了,但它仍旧会占两倍的高和宽。
2 0
- 使用canvas画图,图形模糊怎么办
- canvas画图模糊问题
- 解决canvas画图模糊的问题
- 已解决canvas画图模糊的问题
- 使用canvas画图
- HTML5使用canvas画图时,图片被自动放大模糊的问题.....
- QML画图-Canvas画基本图形
- canvas画图时,图形被拉伸问题
- 首次使用canvas标签画图
- html5 Canvas画图3:1像素线条模糊问题
- 使用canvas画不规则图形
- HTML5使用canvas绘制图形
- 使用canvas来绘制图形
- HTML5使用canvas绘制图形
- 使用Canvas绘制各种图形
- Canvas画图
- Canvas画图
- canvas 画图
- Could not find server 'XXX' in sys.servers.
- 20160818项目总结
- [收藏]javascript keycode大全
- 单片机的编程语言和开发环境
- 原型模式(java版)
- 使用canvas画图,图形模糊怎么办
- 《JAVA》——DBCP连接池
- C Primer Plus(第五版)中文版第12章编程练习(部分使用新特性,在codeblocks下通过测试,vc++6下运行可能出现错误)
- Android中通过MediaStore获取音乐文件信息方法
- 母牛的故事(递归或迭代实现)
- 数据结构实验之图论四:迷宫探索
- NOIP2011 选择客栈 解题报告(DP)
- mysql5.6添加用户出错 :Field 'ssl_cipher' doesn't have a default value
- 前端速学成财:第十二课-实战演练:用gulp像CMS那样生成新闻页面