有如下的程式碼：

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