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

StackOverflow https://stackoverflow.com/questions/2405772

  •  18-09-2019
  •  | 
  •  

Вопрос

видеть это

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

Это было полезно?

Решение

Что я делаю:
Создайте фиктивное холст с тем же размером, что и ваш холст. 

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

Не очень красиво, особенно в вашей ситуации, когда вам потребовалось бы, чтобы вы воссоздали холст более 50 раз в секунду ... заинтересованные в том, чтобы увидеть другие ответы ... это работает для меня, потому что я просто изменяю размер холста, когда изменение Whipwidth/ClientHeight [окно .Onresize

Другие советы

Я знаю, что сейчас это как -то старое:

Вам не нужно воссоздать холст, как объясняет 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);
}

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top