HTML5画布脏矩形Buggy问题

Question

我正在使用脏矩形来设置坦克的动画围绕地图。对于公平的游戏，坦克的躯干只能沿主要方向行进，它的顶部大炮（与躯干分开，但附着在它上面）也可以在主要方向上旋转。

问题在于，当我使用clearRect时，它可能会清除其他对象，并立即找到障碍。当坦克以一定的速度移动时，调用clearRect。是否有可能（没有任何预制的physicsEngine /外部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();

当然，如果你的代码/设置允许你可以重新绘制你清除的区域内的区域而不是一切，但是如果这可能完全取决于你已经实现的绘制逻辑。