javascript - HTML5 キャンバスが画像に穴を開ける

Question

HTML5 キャンバスでいくつかのアニメーション化されたオブジェクトを実行する必要があります。そして、いくつかの画像が別の画像と交差するときに、いくつかの画像に穴を開ける必要があります。そして、私はcadrs間の固定遅延が必要です。だから私はこれをしました : サーバーから画像を取得し、各 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();

これをより効果的に行う方法はありますか？