Javascript HTML5画布在图像中打洞

我需要在HTML5画布上制作几个动画对象。我需要在一些图像上打洞，当它们与另一个图像交叉时。我需要固定的CADR之间的延迟。 所以我这样做了： 但它的工作相当缓慢 我的方式： 正如你们在视频中看到的，在任何情况下，单元都应该是可见的，为此我在其他物体上打洞。 我从服务器获取图像，并检查单位是否与每个cadr中的其他对象交叉。 如果单位穿过它们，我会在其他物体上打洞

代码： Holc-哪里需要洞。 ObjUnit——制造洞的单位

{
    Holc.wait = true;
    var difY = ObjUnit.PosY - Holc.PosY;
    var difX = ObjUnit.PosX - Holc.PosX;
    var tempc = 0;
    tmpcontext.beginPath();
    tmpcontext.globalCompositeOperation = "destination-out";
    var gradient = tmpcontext.createRadialGradient(maxUnitX + difX + ObjUnit.height / 2, maxUnitY + difY + ObjUnit.height / 2, 0,
    maxUnitX + difX + ObjUnit.height / 2, maxUnitY + difY + ObjUnit.height / 2, ObjUnit.height / 2 + 10);
    gradient.addColorStop(0.3, 'rgba(255,255,255,1)');
    gradient.addColorStop(1, 'rgba(255,255,255,0)');
    tmpcontext.fillStyle = gradient;
    tmpcontext.fillRect(maxUnitX + difX, maxUnitY + difY, ObjUnit.width, ObjUnit.height);

}

我为每个跨越对象的单元编写此代码。在这之后，我做了这个：

if (Holc.wait == true) {
    MainTimerInterval.AllLoaded = false;
    var imageData = tmpcontext.getImageData(maxUnitX, maxUnitY, Holc.width, Holc.height);
    var tmpCanvas = document.createElement("canvas");
    var tmpcontext = tmpCanvas.getContext("2d");
    tmpCanvas.width = Holc.width;
    tmpCanvas.height = Holc.height;
    tmpcontext.putImageData(imageData, 0, 0);
    varmass.needtoload++;
    PictureData.push({
        TextureId: finmass[i][j2].TextureId,
        Version: "No",
        SizeofKadr: PictureData[j3].SizeofKadr,
        isNeedHole: PictureData[j3].isNeedHole,
        Image: new Image()
    });
    PictureData[PictureData.length - 1].Image.onload = function () {
        varmass.loaded++;
    }
    PictureData[PictureData.length - 1].Image.src = tmpCanvas.toDataURL();
}

正如你们所看到的，我从临时画布上的源图像剪切径向渐变，从临时画布数据创建图像，然后将其推送到图像数组

当

varmass.needtoload==varmass.loaded

我开始绘制动画。
而且工作速度非常慢。
我认为慢操作是这样的：

PictureData[PictureData.length - 1].Image.src = tmpCanvas.toDataURL();

你知道怎样做才能更有效吗