html - 如何避免 HTML Canvas 自动拉伸(stretch)

Question

我有以下一段 HTML:

<style type="text/css">
    #c{width:200px;height:500px}
</style>
<canvas id="c"></canvas>
<script type="text/javascript">
    var i = new Image();
    i.onload = function () {
        var ctx = document.getElementById('c').getContext('2d');
        ctx.drawImage(i, 0, 0);
    }
    i.width = i.height = 20; // actual size of square.png
    i.src = 'square.png';
</script>

问题是绘制的图像会根据 Canvas 的大小自动拉伸(stretch)(调整大小)。我已尝试使用所有可用参数 (drawImage(i, 0, 0, 20, 20, 0, 0, 20, 20))，但没有帮助。

是什么导致我的绘图拉伸(stretch)，我该如何防止这种情况发生？

谢谢，
汤姆

Answer 1

您需要 canvas 元素中的 width 和 height 属性。它们指定 Canvas 的坐标空间。显然，它默认为 2:1 宽高比的 Canvas ，您的 CSS 将其倾斜成正方形。