canvas为什么画线模糊

Posted 2020-11-02 小曦曦

有如下的代码：

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