javascript - 画布剪辑（）没有被重置？

Question

我正在制作一些动画，我尝试将 3 个图像相互组合在一起，并且我在该clip()方法上取得了部分成功。

        else if(curpage==103)
        {
            ctx.fillStyle = "#000000";
            rot = 0;
            y = 1440;
            a = 0.001;
        }
        else if(curpage==104)
        {
            ctx.fillStyle = "#000000";
            rot = 0.6;
            y = 840;
            a = -0.001;
        }

...

var dreamfades = function()
{

    ...

        else if(curpage==103)
        {
            ctx.drawImage(img1,0,0);
            ctx.save();
            ctx.translate(1280,y);
            ctx.rotate(rot);
            ctx.rect(-1600,-465,1600,800);
            ctx.clip();
            ctx.rotate(-rot);
            ctx.drawImage(img3,-1280,-y);
            ctx.rotate(rot);
            ctx.drawImage(img2,-1280,-465);
            ctx.restore();
            if(rot<0.3)
                a+=0.0001;
            else if(rot>0.6)
                a=0;
            else
                a-=0.0001;
            if(rot<0.6)
            {
                rot+=a;
                y-=(a*1000);
            }
        }
        else if(curpage==104)
        {
            ctx.fillRect(0,0,1280,720);
            ctx.save();
            ctx.translate(1280,y);
            ctx.rotate(rot);
            ctx.rect(-1600,-465,1600,800);
            ctx.clip();
            ctx.rotate(-rot);
            ctx.drawImage(img3,-1280,-y);
            ctx.rotate(rot);
            ctx.drawImage(img2,-1280,-465);
            ctx.restore();
            if(rot>0.0)
            {
                a-=0.001;
                rot+=a;
                y-=(a*1000);
            }
        }

        requestAnimationFrame(dreamfades)
}

• img1是背景图像。
• img2是刀的图像，其中刀片是半透明的
• img3是受害者的形象，将被“反映”在刀中

当用户使用curpage==103它时，一切都按原样进行：img1显示，然后刀在擦拭中滑动img1，并且img3仅显示在刀片​​中。但是当用户来到时curpage==104，刀会掉下来，但img3现在是在整个画布上而不是在画布上绘制的fillRect()。如果用户回来curpage==103，img3是后台而不是img1。如果用户转到另一个curpage然后返回curpage==103,img3仍然是背景，除非刷新页面。

我有一种感觉，它clip()以某种方式持续存在，但我不知道如何“取消剪辑（）”它。我哪里错了？

标签： javascripthtml5-canvasclip