Canvas绘制图片模糊
来源:互联网 发布:chown r mysql mysql 编辑:程序博客网 时间:2024/05/01 13:56
canvas是html5的新标签,是个可以绘制图形的画布,画布的默认大小为300x150。在自定义绘制画布大小的时候有注意的问题,就是用样式来设置高度和宽度的时候 比如
<div style="width:1000px; height: 600px; " id="canvas_size"> <canvas id="canvas" style="width: 100%; height: 100%; background-color: #eee">您的浏览器不支持H5画布属性</canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.arc(120, 75, 20, 0, Math.PI * 2, false); ctx.fillStyle = "#000"; ctx.fill(); </script></div>
他等于是把整个画布进行了拉伸,这样绘制出来的图形是模糊的。
可以看到圆的边缘是模糊的,而且变成了椭圆?这是因为画布还是默认的大小宽300px,高150px,但是用style强行把画布拉伸到了1000x600。宽度扩大3.33倍,高度扩大4倍,所以变成了椭圆。宽改为1200就是圆了。
所以不能在样式里面设置大小,应该用canvas自带的width和height属性来设置高度。看下面的代码。注意画圆的参数也改变了
<div style="width:1000px; height: 600px; " id="canvas_size"> <canvas id="canvas" width="1000px" height="600px" style="background-color: #eee">您的浏览器不支持H5画布属性</canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.arc(500, 300, 200, 0, Math.PI * 2, false); ctx.fillStyle = "#000"; ctx.fill(); </script></div>
所以设置画布的大小是用canvas自带的width和height属性,才是画布真正的大小,网上有方法可以解决,但是我没去试,因为感觉比较麻烦,还不如直接就是以后就是给固定的大小。有人说这样子自定义怎么办,那简单,套个div然后在js获取宽度或者获取屏幕的宽高然后设置canvas的值就好了。代码如下。
<div style="width:1000px; height: 600px; " id="canvas_size"> <canvas id="canvas" style="background-color: #eee">您的浏览器不支持H5画布属性</canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var canvas_size = document.getElementById("canvas_size");//获取div var ctx = canvas.getContext("2d"); canvas.width = canvas_size.offsetWidth;//设置宽 canvas.height = canvas_size.offsetHeight;//设置高 ctx.arc(500, 300, 200, 0, Math.PI * 2, false); ctx.fillStyle = "#000"; ctx.fill(); </script> </div>
结果和上面的图是一样的,各位可以自己试一下。
总结
canvas的宽高要用自带的width和height来写才是真正的画布大小,<canvas width="1000px" height="600px" style="background-color: #eee">您的浏览器不支持H5画布属性</canvas>
,自适应用js来设置。
阅读全文
0 0
- Canvas绘制图片模糊
- android Canvas绘制图片模糊
- html5 canvas绘制图片模糊的问题
- Canvas-drawImage 绘制图片模糊问题
- html5 canvas绘制图片模糊的问题
- canvas 绘制图片
- canvas 绘制半透明图片
- canvas绘制图片详解
- Canvas绘制图片
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Canvas 在高清屏下绘制图片变模糊的解决方法
- canvas 之图片模糊&马赛克
- html5 canvas drawImage图片模糊
- canvas绘制图像或者文字时模糊
- canvas绘制出现模糊的问题
- 使用html5 canvas绘制图片
- 【HTML】Canvas(3)-绘制图片
- canvas中绘制图片居中
- Parzen窗估计
- Spring注解@Component、@Repository、@Service、@Controller
- 深度学习与计算机视觉(11)_基于deep learning的快速图像检索系统
- Oracle能修改数据表中的列(字段)顺序吗
- Python SQLAlchemy ORM示例
- Canvas绘制图片模糊
- 使用URLConnection做网络请求
- 王者荣耀 是什么语言编写的
- 深度学习与计算机视觉(12)_tensorflow实现基于深度学习的图像补全
- 永久激活windows10专业版(并防止杀毒软件查杀)+eclipse字体大小修改
- ArrayList和linkedList的插入、查找、删除
- 玲珑 1138
- 剑指offer——矩阵中的路径(好)
- JAVA第一课第五节知识点