为什么canvas绘制的线条会模糊、有锯齿？

有如下的代码：

<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。

为什么canvas绘制的线条会模糊、有锯齿？相关推荐

Canvas绘制基本线条的方式
Canvas绘制基本线条的方式什么是Canvas - Canvas,顾名思义,是一块"画布",Canvas有着默认的宽(300px).高(150px); <canvas i ...
canvas绘制不规则线条，类似画板的画笔，基于zrender
本文介绍绘制类似画板中画笔功能的线条 zrender实现简易画板功能可绘制大部分常用图形在文章末尾可参考多数情况下绘制线条首先想到的是用Line绘制,当然1或2像素的细线没什么问题当线条变宽就有意 ...
[七夕节]——一款基于canvas绘制五颜六色线条合成一个爱心发光动画特效
Canvas基本介绍 Canvas介绍 1.canvas是html5的一个新标签,属于h5的新特性 2.canvas标签是一个图形的容器,简单点说就是一块画布,你可以在上画矩形,圆形,三角形,折线等等 ...
在js中，使用canvas绘制渐变色线条
效果代码注:看注释 var colors = ['#6bfae1' ,'#63b9e9' ,'red' ,'yellow' ,'blue', 'green'];var ctx = canvas.g ...
canvas引入图片后变模糊
最近用Canvas画一些东西,结果用canvas绘制图片出来是模糊的!!!! 比如这样完全失真了!!! 这是我写的源代码 //html<canvas id="canvas" ...
canvas - 绘制图片，图片变模糊问题解决）
问题:canvas绘制图片,图片变模糊设定一个一定尺寸的canvas,我这里设置的画布大小是400px*400px.当一张图片完全画到画布上的时候,大概率都会出现图片模糊的情况. 我拿下面一张图片画 ...
canvas绘制图片，图片变模糊
canvas绘制图片,图片变模糊问题: 设定一个一定尺寸的canvas,我这里设置的画布大小是400px*400px.当一张图片完全画到画布上的时候,大概率都会出现图片模糊的情况. 我拿下面一张图片 ...
用html5做一条线,使用HTML5 canvas绘制线条的方法
使用HTML5 canvas绘制线条的方法发布时间:2020-08-29 11:24:23 来源:亿速云阅读:96 作者:小新这篇文章主要介绍了使用HTML5 canvas绘制线条的方法,具有一 ...
h5的横线_使用HTML5 Canvas绘制直线或折线等线条的方法讲解
HTML5 Canvas基本概念讲解html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏 ...

为什么canvas绘制的线条会模糊、有锯齿？

结论

为什么canvas绘制的线条会模糊、有锯齿？相关推荐

最新文章

热门文章