Question

我想移动剪辑区域的位置，然后在剪辑区域中绘制。为什么以下方法不起作用？感谢任何启示:-) 杰拉德

<canvas id="canvas" width="150" height="150"></canvas>
<script>

function fade() {
    var level = 0;
    var xClip=0, yClip=0;
    var step = function ( ) {
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.fillRect(0,0,150,150);

        // Create a circular clipping path
        ctx.beginPath();
        ctx.arc( xClip, xClip, 60, 0, Math.PI*2, true);
        ctx.clip();

        // draw background
        var lingrad = ctx.createLinearGradient(0,-75,0,75);
        lingrad.addColorStop(0, '#232256');
        lingrad.addColorStop(1, '#143778');

        ctx.fillStyle = lingrad;
        ctx.fillRect(-75,-75,150,150);

        if (level < 15) {
            level ++;
            xClip = yClip = level*10;
            console.log("level: " + level);
            console.log("xClip: " + xClip);
            setTimeout(step, 1000);
        }
    };
    setTimeout(step,100);
}
fade();
</script>

Answer 1

动画剪辑。

当您多次应用剪辑时，剪辑区域会剪切到现有剪辑。动画剪辑区域而不考虑这个将创建一个更小的剪辑区域。

保存并恢复。

在设置剪辑区域动画时，需要保存和恢复画布状态。 ctx.save()将当前画布2D状态保存到堆栈，ctx.restore()从堆栈顶部弹出最后保存的状态。保存和恢复可以嵌套。每次保存都必须在某个时刻进行恢复，否则最终会扼杀内存并最终溢出状态堆栈。

修复您的代码。

您的代码几乎就在那里，只需要进行一些修改就可以完成您想要的任务。我还将canvas.getContext()移出了淡入淡出功能，因为你只需要这样做一次。

function fade() {
    var level = 0;
    var xClip=0, yClip=0;
    var step = function ( ) {
        ctx.fillRect(0,0,150,150);

        //---------------------------------------------
        ctx.save();  // push the current unclipped state to the state stack.

        // Create a circular clipping path
        ctx.beginPath();
        ctx.arc( xClip, xClip, 60, 0, Math.PI*2, true);
        ctx.clip();

        ctx.fillStyle = lingrad;
        ctx.fillRect(-75,-75,150,150);

        if (level < 15) {
            level ++;
            xClip = yClip = level*10;
            setTimeout(step, 1000);
        }

        //---------------------------------------------
        ctx.restore();   // pop the last saved state from the state stack
                         // restoring the clip region to the default
                         // ready for the next call to step.

    };
    setTimeout(step,100);
}

// get the 2D context only once
var ctx = document.getElementById('canvas').getContext('2d');

// As the gradient does not change over time don't create this every
// frame as it is a expensive operation
var lingrad = ctx.createLinearGradient(0,-75,0,75);
lingrad.addColorStop(0, '#232256');
lingrad.addColorStop(1, '#143778');

fade();

是否可以为画布剪辑区域的位置设置动画？

1 个答案: