为什么canvas绘制的线条会模糊、有锯齿?
来源:互联网 发布:宁波行知小学总课表 编辑:程序博客网 时间:2024/04/18 13:23
有如下的代码:
<style type="text/css"> canvas { position:absolute; height : 100%; width : 100%; }</style><canvas id="canvas" width="100%" height="100%"></canvas><script type="text/javascript"> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d') context.translate(70, 70); context.moveTo(0, 0) context.lineTo(70, -70) context.stroke();</script>
结果实际的效果虚化非常严重,清晰度非常差,锯齿非常严重,如下所示:
为什么会出现这样的情况呢?原因是canvas的宽度与高度必须作为属性明确指定(也不能通过CSS设置),并且只能是数字,不支持百分比。基于以上的规则,所以很容易找到症结,canvas绘制的图片本来较小,但经过CSS强行放大拉伸,所以就会出现模糊、锯齿严重的效果。
解决的办法很简单,在绘制之前,首先设置canvas的宽度,代码如下:
var canvas = document.getElementById('canvas'), // 计算画布的宽度 width = canvas.offsetWidth, // 计算画布的高度 height = canvas.offsetHeight, context = canvas.getContext('2d') // 设置宽高 canvas.width = width; canvas.height = height;
再次刷新浏览器,终于一切正常了。
结论
HTML中很多元素的宽高必须通过属性设定,而不是CSS,比如canvas,比如SVG。
阅读全文
1 0
- 为什么canvas绘制的线条会模糊、有锯齿?
- .canvas绘制出来的东西有锯齿,怎么解决?
- Matlab绘制线条消除锯齿
- Matlab绘制线条消除锯齿
- canvas画有白色的线条
- html5的canvas绘制线条,moveTo和lineTo详解
- [Canvas系列]Canvas简单线条绘制_02
- html5 canvas绘制图片模糊的问题
- html5 canvas绘制图片模糊的问题
- canvas绘制出现模糊的问题
- Canvas绘制图片模糊
- Canvas技术入门:介绍、线条绘制
- html5<canvas>标签绘制矩形,线条,圆
- 小贝_html5 canvas绘制线条曲线
- 积累绘制的线条!
- android Canvas绘制图片模糊
- HTML5 Canvas里绘制椭圆并保持线条粗细均匀的方法
- html5 Canvas画图3:1像素线条模糊问题
- ElasticSearch搜索引擎java客户端接口详解
- Notepad++配色
- C语言const:禁止修改变量的值
- 使用python进行数据分析介绍及部分教程
- Android 磁场传感器 地磁倾角计算 SensorManager.getInclination方法
- 为什么canvas绘制的线条会模糊、有锯齿?
- hdoj 1686 Oulipo
- 软件光栅化渲染器(九)
- Windows上部署Jenkins遇到的问题
- byte为何范围是-128~127
- 编程第五十六天
- 【Leetcode】389. Find the Difference
- 三维网格精简算法(Quadric Error Metrics)附源码(一)
- 双队列=>栈