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';
};

Answer 2

据我所知。您只想对getContext（）进行一次调用。虽然我在这一点上并没有真正分析代码。

调整画布大小，问题出在哪里？

2 个答案: