为什么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>
   
   

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
    
    
6
    
    
7
    
    
8
    
    
9
    
    
10
    
    
11
    
    
12
    
    
13
    
    
14
    
    
15
    
    
16
    
    
17
   
   

结果实际的效果虚化非常严重，清晰度非常差，锯齿非常严重，如下所示：

为什么会出现这样的情况呢？原因是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;
   
   

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
    
    
6
    
    
7
    
    
8
    
    
9
   
   

再次刷新浏览器，终于一切正常了。

结论

HTML中很多元素的宽高必须通过属性设定，而不是CSS，比如canvas，比如SVG。