javascript - 调整 Canvas 大小，问题在哪里？

Question

我会发布一个链接，因为这里有很多内容要发布:

http://hem.bredband.net/noor/canvas.htm

我的目标是使图片适合窗口，图像的宽度与窗口相同，即使在调整大小后也是如此。如果图片的高度对于窗口来说太大了，那么图片应该根据高度而不是宽度自行调整大小。

我的代码某处有问题..如果这很愚蠢请原谅我，我还在学习..

谢谢!

Answer 1

我认为这是您要实现的行为。我对其进行了重构，因此您只需创建一个 Image 对象(并将变量名称更改为英语，以便我可以更轻松地理解代码)。希望很清楚代码是如何工作的。如果您对此有任何疑问，请随时在评论中提问。 body onload 属性需要更改为 "setupBackground();" 而不是 "draw();" 才能使用此代码。

function setupBackground() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    function draw() {
        canvas.width = 0;
        canvas.height = 0;
        var divHeight = div.scrollHeight;
        var divWidth = div.scrollWidth;
        var yScale = divHeight / img.height;
        var xScale = divWidth / img.width;

        var newImgHeight = img.height * xScale;
        var newImgWidth = divWidth;

        if (divHeight >= newImgHeight) {
            newImgHeight = divHeight;
            newImgWidth = img.width * yScale;
        }

        canvas.width = divWidth;
        canvas.height = divHeight;
        ctx.drawImage(img,0,0,newImgWidth,newImgHeight);
    }

    var img = new Image();
    img.onload = function() {
        window.onresize = draw;
        draw();
    }
    img.src = 'ad.jpg';
};