為什麼canvas繪製的線條會模糊、有鋸齒?
阿新 • • 發佈:2019-02-07
有如下的程式碼:
<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。