Есть ли способ динамически расширить холст html5 без очистки того, что нарисовано на нем? - PullRequest
Новая
       11

Есть ли способ динамически расширить холст html5 без очистки того, что нарисовано на нем?

1 голос
/ 09 марта 2010

см. это

когда вывод достигнет нижней части страницы, я бы хотел, чтобы холст автоматически расширялся, чтобы он мог продолжать работу. Я попытался установить свойство canvas.height, но оно очищает окно. Есть ли способ сделать это?

Ответы [ 2 ]

3 голосов
/ 18 мая 2013

Я знаю, что это уже довольно давно, однако:

Вам не нужно воссоздавать холст, как объясняет ItzWarty. Вы можете сделать это: 

<html>...
  <canvas id="canvas"></canvas>
  <canvas id="buffer" style="display:none;"></canvas>
  ...
</html>

Тогда это будет ваш javascript: 

var canvas = document.getElementById('canvas');
var buffer = document.getElementById('buffer');
window.onresize = function(event) {
    var w = $(window).width(); //Using jQuery for easy multi browser support.
    var h = $(window).height();
    buffer.width = w;
    buffer.height = h;
    buffer.getContext('2d').drawImage(canvas, 0, 0);
    canvas.width = w;
    canvas.height = h;
    canvas.getContext('2d').drawImage(buffer, 0, 0);
}

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

2 голосов
/ 10 марта 2010

Что я делаю:
создать холст с таким же размером, как ваш холст. 

dummyCanvas.getContext('2d').drawImage(yourCanvas, 0, 0);
newCanvas = recreate(yourCanvas);
newCanvas.getContext('2d').drawImage(dummyCanvas);

Не очень красиво, особенно в вашей ситуации, когда требуется, чтобы вы воссоздали холст 50+ раз в секунду ... Интересует просмотр других ответов ... Это работает для меня, потому что я просто изменяю размер холста, когда clientWidth / clientHeight изменения [window.onresize]

...