javascript - HTML5 Canvas 脏矩形错误问题

Question

我正在使用肮脏的矩形来制作坦克绕着 map 移动的动画。为了公平的游戏，坦克的躯干只能在主要方向上移动，它的顶部加农炮(与躯干分开，但附在它上面)也可以在主要方向上旋转。

问题是，当我使用 clearRect 时，它可能会清除其他对象以及紧邻它的障碍物。 clearRect 在坦克以特定速度移动时被调用。是否有可能(没有任何预制的 physicsEngine/external Gitub API 我必须依靠)，使坦克动画，使其不会清除周围的物体？

我也尝试过多个 Canvas ..我将如何覆盖多个 Canvas ，以便动画仍然显示，但一个中的 clearRect 不会影响另一个中的任何对象？

示例问题图片:

Answer 1

有两个(常见的)选项:

1. 只在单独的 Canvas 上绘制坦克，这样当您清除坦克时，只有 Canvas 受到影响。您可以使用固定或绝对定位的元素覆盖 Canvas 。
2. 使用单一 Canvas ，但重绘所有内容。您可以通过为要重绘的区域使用剪贴蒙版来提高重绘的效率。

1) 覆盖 Canvas :

<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();

当然，如果您的代码/设置允许，您可以只重绘您清除的区域内的区域，而不是重绘所有区域，但是这是否可能完全取决于您实现的绘制逻辑。