Отключить сброс в HTML5 Canvas при заданной ширине / высоте

Question

Мой сценарий состоит в том, что ширина / высота холста изменяется динамически, и я не хочу сбрасывать холст.Вместо этого я использую clearRect (), так как знаю границы, в которых должен очищаться прямоугольник.

1. Есть ли способ отключить сброс холста при повторной установке ширины / высоты?

2. Есть ли способ сохранить предыдущийсостояние и просто загрузить его обратно на холст точно без повторного рисования?

Answer 1

1. Боюсь, что это невозможно отключить, оно встроено в спецификацию canvas.

   Раздел 4.8.11:

   Когда элемент холста создается, а затем всякий раз, когда устанавливаются атрибуты width и height (либо на новое значение, либо на предыдущее значение), растровое изображение и любые связанные с ним контексты должны быть очищены до их исходного состояния и повторно инициализированы с помощью новые размеры координатного пространства.

2. Да, и GetImageData / PutImageData - это один из способов, но он, вероятно, намного медленнее, чем следующий:

   Допустим, ваш холст называется realCanvas. Создайте второй холст (мы назовем его fakeCanvas), который будет настолько большим, насколько вы когда-либо предполагали, что ваш реальный холст будет, но только сделайте его в коде JavaScript и никогда не добавляйте его в документ (так что никто никогда не увидит его) ).

   Затем перед изменением размера realCanvas выполните следующую операцию:

   fakeCanvasContext.drawImage(realCanvas, 0, 0);
   

   Это перетянет один холст на другой, и это произойдет очень быстро с точки зрения производительности.

   Как только вы закончите с изменением размера, вы можете нарисовать содержимое fakeCanvas обратно в ваш realCanvas.

   realCanvasContext.drawImage(fakeCanvas, 0, 0);
   

   И это все!

   Если вы хотите стать техническим, вы можете ускорить мой путь, сделав это для второго розыгрыша:

   realCanvasContext.drawImage(fakeCanvas,
       0, 0, realCanvas.width, realCanvas.height,
       0, 0, realCanvas.width, realCanvas.height);`
   

   Таким образом, вы копируете только ту часть, которая может поместиться на realCanvas. Обратите внимание, что я не проверял написанный код, поэтому возможна синтаксическая ошибка или две.