Почему холст повторно отображает весь холст, а не только определенную часть?

Question

Из моего очень ограниченного опыта холста html5 кажется, что способ оживить что-то - очистить весь холст и нарисовать все с нуля.

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

Есть ли альтернатива? Например, используя объектно-ориентированный подход, если вы хотите повторно отобразить дерево на переднем плане, система должна кэшировать фон и только перезагрузить этот слой.

Answer 1

Ваше понимание верности.

Типичные приложения холста полностью стирают холст и перерисовывают объекты.

Этот процесс хорошо работает, поскольку холст Html разработан с невероятно быстрой скоростью вытягивания.

В отличие от объектно-ориентированного дизайна данные, которые рисуются на холсте, были полностью «сплющены».

Существует один массив данных, содержащий красный, зеленый, синий. & Альфа-компоненты всех пикселей на холсте.

[ 
    pixel1Red, pixel1Green, pixel1Blue, pixel1Alpha, 
    pixel2Red, pixel2Green, pixel2Blue, pixel2Alpha, 
    pixel3Red, pixel3Green, pixel3Blue, pixel3Alpha, 
    ... 
] 

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

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

Кроме того, Canvas является аппаратным ускорением, когда доступен графический процессор.

Answer 2

Это основная техника, да. Можно также очистить определенную область холста вместо этого, используя clearRect():

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

// Clear the specified rectangular area from x, y through width, height. 
context.clearRect(x, y, width, height); 

В вашем случае переднего плана и фон изменений, однако, рассмотреть вопрос об изменении globalCompositeOperation, который позволяет рисовать фигуры под существующие формы:

// Draw new shapes behind the existing canvas content. 
ctx.globalCompositeOperation = 'destination-over'; 

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

Другой полезный метод clip(), который позволяет рисовать фигуры в качестве маски:

// Create a circular clipping path. 
ctx.beginPath(); 
ctx.arc(0, 0, 60, 0, Math.PI * 2, true); 
ctx.clip(); 

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing