Javascript 精灵动画clearRect替代方案？

什么？我正在尝试使用画布和JavaScript在网格顶部显示动画，该网格也必须使用JavaScript绘制

问题要删除动画的前几帧，我使用了clearRect（）。但是，这打破了我不想要的网格：(

JSFiddle:

ctx.clearRect（50，100，宽度，高度）；

---

问题如何在不破坏精灵后面的网格的情况下删除动画的前几帧？

这里的常见操作是清除所有内容并重新绘制所有内容。
但是如果你的背景没有改变，这可能会变得很麻烦

在这种情况下，一个简单的解决方案是使用屏幕外画布，它将充当图层

首先，在初始化阶段，在这个屏幕外画布上绘制网格。
然后在循环中，使用

drawImage

方法在主上下文上绘制屏幕外画布

var canvas=document.getElementById（“myCanvas”），
ctx=canvas.getContext（“2d”），
视场=300，
viewDist=5，
w=画布宽度/2，
h=画布高度/2，
//这里我们只为网格创建一个屏幕外画布
gridCtx=canvas.cloneNode（）.getContext（'2d'），
角度=0，
i、 p1，p2，
网格=5；
函数initGrid（）{
///在屏幕外画布上创建垂直线
对于（i=-grid；我相信您必须清除所有内容，然后重新绘制网格谢谢。这可以做到这一点，但我的实际场景中有更多的图像，这造成了网格问题-它是在其他图像上绘制的。为了解决这一问题，我为网格创建了第二个画布DOM，并相应地应用了z索引值。