25

我有以下一段 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))，但没有帮助。

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

谢谢，
汤姆

4

5 回答 5

37

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

于 2010-05-23T14:14:49.017 回答
27

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

于 2010-10-27T23:57:53.990 回答
11

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

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

document.getElementById('yourcanvasid').setAttribute('width', aWidth);
document.getElementById('yourcanvasid').setAttribute('height', aHeight);
于 2013-02-05T14:45:24.450 回答
8

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

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

效果很好。

于 2012-08-05T10:10:09.310 回答
-1

我发现在我的动画循环中放置一个等待超时的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);
}
于 2017-06-07T17:37:28.353 回答