Question

我需要在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();
}

如您所见，我从临时画布上的源图像中剪切了Radial Gradient，并从临时画布数据创建了Image，然后将其推送到图像数组。

当varmass.needtoload==varmass.loaded我开始画动画时而且效果很慢 我认为这是一个缓慢的操作：

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

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

HTML5画布在图像中打洞

0 个答案: