如何避免 HTML Canvas 自动拉伸

How to avoid HTML Canvas auto-stretching

提问by Tom

I have the following piece of HTML:

我有以下一段 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>

The issue is that the drawn image is automatically stretched (resized) proportionally with the size of the canvas. I have tried using all available parameters (drawImage(i, 0, 0, 20, 20, 0, 0, 20, 20)) and that didn't help.

问题是绘制的图像会与画布的大小成比例地自动拉伸（调整大小）。我已尝试使用所有可用参数 ( drawImage(i, 0, 0, 20, 20, 0, 0, 20, 20))，但没有帮助。

What is causing my drawing to stretch and how can I prevent that?

是什么导致我的绘图拉伸，我该如何防止？

Thanks,
Tom

谢谢，
汤姆

回答by Eric

You need the widthand heightattributes in the canvas element. They specify the coordinate space for the canvas. Apparently, it defaults to a canvas of a 2:1 aspect ratio, which your CSS is skewing into a square.

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

回答by Blixxy

It's worth noting that the Width and Height attributes of canvas are notlike the old school <img> width and height attributes. They are not a substitute for CSS. They specify how many pixels the pixel buffer in the canvas itself should have, and if you don't apply a size to it with css, css will imply it's size from that shape of that pixel buffer. Setting the element's size in css does not set the size of the pixel buffer - it resizes it. From a CSS perspective, a <canvas> is entirely the same thing as an <img>.

值得一提的是画布的宽度和高度属性是不喜欢老派的<img>宽度和高度属性。它们不能替代 CSS。它们指定画布本身中的像素缓冲区应具有多少像素，如果您不使用 css 对其应用大小，则 css 将暗示它的大小来自该像素缓冲区的该形状。在 css 中设置元素的大小不会设置像素缓冲区的大小 - 它会调整它的大小。从 CSS 的角度来看，<canvas> 与 <img> 完全相同。

回答by jst

Ok, a little bit simplier (and lighter) than JQuery is .. JAVASCRIP ITSELF of course !

好的，比 JQuery 更简单（和更轻）的是..当然是 JAVASCRIP 本身！

If you need to change dynamicaly your canvas dimensions, just use:

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

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

回答by Angelo

If you're using JQuery, you shouldn't set the CSS (as the commenters above mentioned). You need to set the attribute so:

如果您使用的是 JQuery，则不应设置 CSS（如上述评论者所述）。您需要这样设置属性：

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

works great.

效果很好。

回答by prithwin

I found it easier to just put a while loop waiting for timeout within my animation loop, For example:

我发现在我的动画循环中放置一个等待超时的 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);
}