HTML / Jquery вопрос об изменении размера холста - $ (окно) .resize vs $ (окно) .load / $ (документ) .ready - PullRequest
Новая
       22

HTML / Jquery вопрос об изменении размера холста - $ (окно) .resize vs $ (окно) .load / $ (документ) .ready

1 голос
/ 18 июля 2011

В настоящее время я работаю над приложением, которое будет работать с использованием элемента canvas HTML5. У меня есть код, работающий, чтобы изменить размер холста, чтобы соответствовать размеру окна, как это изменилось следующим образом: 

<script type="text/javascript">
$(window).resize(function(){
var canvas = document.getElementById('canvas');
canvas.width=window.innerWidth;
canvas.height = window.innerHeight;
});
</script>

Однако я хочу, чтобы размер моего холста был полностью изменен с самого начала, а не только когда кто-то изменяет размер экрана. По какой-то причине, когда я копирую приведенный выше код, за исключением того, что я изменяю $(window).resize на $(window).load или $(document).ready, холст не устанавливается в размер окна, с которого начинается.

Кто-нибудь видит что-то не так с тем, что я пытаюсь сделать, чего я не вижу, или есть какие-то другие идеи о том, как этого добиться?

Лучше всего, и заранее спасибо,
Сами

EDIT:

Вероятно, было бы хорошо отметить, что я загружаю эскиз ProcessingJS на холст. Я не знаю, влияет ли время, которое требуется для загрузки, на вещи или нет, но я подумал, что я мог бы также упомянуть об этом ...

Ответы [ 2 ]

3 голосов
/ 19 июля 2011

Проблема с изменением размера через .width / .height заключается в том, что jQuery использует CSS для этого. Если вы хотите иметь больше пикселей для своего холста, используйте вместо него свойства width / height холста. CSS его растянет, HTML увеличит разрешение. 

$("#canvas")
    .attr('width', $(window).width())
    .attr('height', $(window).height());

http://jsfiddle.net/Jdjxa/1/

1 голос
/ 18 июля 2011

Попробуйте что-то вроде: 

function resizeCanvas() {
    $("#canvas")
        .width($(window).width())
        .height($(window).height());
}

$(function() {
    // initial resize when the page has loaded
    resizeCanvas();

    // bind the resize event to the window
    $(window).resize(resizeCanvas);
});

Скрипка: http://jsfiddle.net/ANSrY/13/

...