HTML5 画布脏矩形 Buggy 问题答案

【问题标题】：HTML5 canvas dirty rectangle Buggy IssueHTML5 画布脏矩形 Buggy 问题
【发布时间】：2013-12-19 06:40:51
【问题描述】：

我正在使用脏矩形为坦克环绕地图设置动画。为了公平地进行游戏，坦克的躯干只能在基本方向上行驶，它的顶部大炮（与躯干分开，但附在其上）也可以在基本方向上旋转。

问题是，当我使用 clearRect 时，它可能会清除其他对象以及紧邻它的障碍物。 clearRect 在坦克以一定速度移动时被调用。是否有可能（没有任何预制的物理引擎/我必须倾斜的外部 Gitub API）为坦克设置动画，使其不会清除周围的物体？

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

示例问题图片：

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

有两个（常用）选项：

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

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

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

【讨论】：

感谢您的多项建议。由于坦克操纵、旋转和射击功能的性质，我选择尝试叠加。
@user2582704 没问题，如果有帮助不要忘记接受答案（投票数正下方有一个复选框）。