如何避免 HTML Canvas 自动拉伸

Posted 2023-03-05

【中文标题】如何避免 HTML Canvas 自动拉伸

【英文标题】：How to avoid HTML Canvas auto-stretching

【发布时间】：2011-02-22 22:30:17

【问题描述】：

我有以下 html：

<style type="text/css">
    #cwidth: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))，但没有帮助。

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

谢谢， 汤姆

【问题讨论】：

找到我的答案***.com/questions/2588181/…

将您的评论提升为真正的答案，以造福下一个前来寻找的人，我会给您一个 cookie（或点赞，无论我有什么）。

【参考方案1】：

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

【参考方案2】：

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

【参考方案3】：

好吧，比 JQuery 更简单（更轻）一点。当然是 JAVASCRIP 本身！

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

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

【讨论】：

document.getElementById('yourcanvasid').width = aWidth 也这样做

【参考方案4】：

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

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

效果很好。

【参考方案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);