Изменение размера холста, в чем проблема? - PullRequest
Новая
       16

Изменение размера холста, в чем проблема?

2 голосов
/ 21 апреля 2010

Я выложу ссылку, так как здесь много, чтобы опубликовать здесь:

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

Моя цель - сделать изображение вписанным в окно с шириной изображения, равной окну, даже после изменения размера. Если высота окна становится слишком большой для окна, размер изображения должен изменяться в соответствии с высотой, а не шириной.

Где-то в моем коде что-то не так ... прости меня, если это глупо, я все еще учусь ..

Спасибо!

Ответы [ 2 ]

2 голосов
/ 21 апреля 2010

Я думаю, что такое поведение вы пытаетесь достичь. Я реорганизовал его, чтобы вам нужно было создать только один объект 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';
};
0 голосов
/ 21 апреля 2010

Насколько я знаю. Вы хотите сделать только один вызов getContext (). Я действительно не анализировал код слишком далеко после этого момента.

...