1

我需要在 HTML5 画布中做几个动画对象。当它们与其他图像交叉时，我需要在一些图像中打孔。我需要固定干部之间的延迟。所以我这样做了：youtube-example 但它的工作速度相当慢我的方式：正如你在视频中看到的那样 - 在任何情况下，单位都应该是可见的，为此我在其他对象上打孔。我从服务器获取图像并检查单元是否与每个 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();

你知道如何更有效地做到这一点吗？

4

0 回答 0