如何避免 HTML Canvas 自动拉伸

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>

问题在于绘制的图像会随着画布大小的改变而自动等比例拉伸（调整大小）。我已经尝试使用了所有可用的参数（drawImage(i, 0, 0, 20, 20, 0, 0, 20, 20)），但没有帮助。

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

谢谢，
汤姆

- Tom

---

找到了答案：当使用CSS时，Canvas会被拉伸，但是使用旧的width和height属性时正常。 - Tom

将您的评论提升为真正的答案，以造福下一个寻求帮助的人，我会给您一个饼干（或点赞，取决于我手头有哪个）。 - msw

Answer 1

你需要在画布元素中使用 width 和 height 属性。它们指定了画布的坐标空间。显然，默认情况下，它是一个宽高比为2:1的画布，而你的CSS将其扭曲成一个正方形。

- Eric

Answer 2

值得注意的是，canvas的宽度和高度属性不像旧式的<img>标签的宽度和高度属性。它们不能替代CSS。它们指定画布本身中的像素缓冲区应该有多少像素，并且如果您没有使用CSS对其进行大小设置，则CSS将从该像素缓冲区的形状暗示其大小。在CSS的视角下，<canvas>与<img>完全相同。

- Blixxy

Answer 3

好的，比JQuery更简单（且轻量级）的当然是 JAVASCRIP 本身！

如果您需要动态更改画布尺寸，请使用：

document.getElementById('yourcanvasid').setAttribute('width', aWidth);
document.getElementById('yourcanvasid').setAttribute('height', aHeight);

- jst

---

document.getElementById('yourcanvasid').width = aWidth 这行代码也可以这样做。 - Pizzaiola Gorgonzola

Answer 4

如果你正在使用JQuery，你不应该设置CSS（如上面的评论者所提到的）。你需要设置属性：

$("canvas").attr('width', aWidth);
$("canvas").attr('height', aHeight);

非常好用。

- Angelo

Answer 5

我发现在我的动画循环中加入一个等待超时的while循环更容易，例如：

function animate() {
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    ryuji.draw();
    ryuji.update();
    let now = Date.now();
    then = now + (1000 / fps);
    while (Date.now() < then) {

    }
    requestAnimationFrame(animate);
}

- prithwin