HTML5 холст грязный прямоугольник Buggy Issue

Question

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

Проблема в том, что когда я использую clearRect, он может очищать к нему другие объекты и препятствия. clearRect называется как танк движется с определенной скоростью. Возможно ли (без какой-либо готовой физикиИнструмент/extermal Gitub API я должен опереться), чтобы оживить резервуар таким образом, чтобы он не очищал объекты вокруг него?

Я также пробовал несколько холстов. Как бы наложить несколько холстов, чтобы анимация все же показывалась, но clearRect в одном не влияет на какой-либо объект в другом?

Изображение выпуска образца:

Answer 1

Есть два (общие) Варианты:

1. рисовать танки только на отдельном холсте так, когда вы очистить бак только что холст пораженной. Вы можете накладывать холсты с помощью фиксированных или абсолютных позиционированных элементов.
2. Используйте единственный холст, но перерисовывайте все. Вы можете сделать перерисовку более эффективной, используя обтравочную маску для региона, который вы хотите перерисовать.

1) Наложение холсты:

<div id="canvasContainer"> 
    <canvas id="canvas1" ... ></canvas> 
    <canvas id="canvas2" ... ></canvas> 
</div> 

CSS:

#canvasContainer { 
    position:relative; 
} 
#canvasContainer > canvas { 
    position:absolute; 
    left:0; 
    top:0; 
} 

2) Чтобы установить обтравочную маску:

ctx.clearRect(x, y, w, h); 
ctx.beginPath(); 
ctx.rect(x, y, w, h); 
ctx.save(); 
ctx.clip(); 

/// redraw everything, only clipped region will be updated 

ctx.restore(); 

Из Конечно, если ваш код/​​настройка позволяет вам просто перерисовать область внутри регионов, которые вы очистили, а не все, но если это возможно, полностью зависит от логики рисования, которую вы выполнили.