0

我正在尝试创建一个动画来清除（如橡皮擦）图像顶部的矩形填充。当圆圈动画时，它会清除它所覆盖的所有区域。

我可以使用 globalCompositeOperation 来做到这一点，但是当我尝试减慢动画速度时，它不起作用。我正在尝试 setTimeout 函数。任何想法为什么动画没有放慢速度？我已经尝试了我所知道的一切，任何帮助或替代方法将不胜感激。

此外，当我尝试使用 setTimeout(func(),time in ms) 函数时，它也会删除图像。

function compose()
//adds the purple fill rectangle, adds the image and then animates the circle
{
context.globalCompositeOperation = 'destination-atop';
fillRectangle(100, 100, 900, 500);
context.globalCompositeOperation = 'destination-atop';
context.drawImage(img, destX, destY);
for (var a = 0; a < 1000; a++) {

    if (x + dx + radius > width || x + dx < radius) {
        dx = -dx;
    }
    if (y + dy + radius > height || y + dy < radius) {
        dy = -dy;
    }
    x = x + dx;
    y = y + dy;
    //setTimeout("circle(x,y)", 1);
    circle(x, y);
    }
context.globalCompositeOperation = 'destination-atop';
context.drawImage(img, destX, destY
}
function circle(x, y)
{// this simply animates the circle over the purple fill
context.globalCompositeOperation = 'destination-out';
context.fillStyle = "#444444";
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, true);
context.closePath();
context.fill(); //setTimeout("context.fill();",3);
context.globalCompositeOperation = 'destination-atop';
}

完整代码：

帆布测试

        var t;
        //holds the drawing context of the canvas element
        var context;

        //size of canvas
        var width = 600;
        var height = 300;

        //position of the ball
        var x = 150;
        var y = 150;

        //speed of the ball
        var dx = 2;
        var dy = 2;

        //ball radius
        var radius = 10;
        var compositeType = ['xor'];
        var destX = 0;
        var destY = 0;
        var img = new Image();
        img.src = 'nexus.jpg';
        function init() {
            context = document.getElementById("canvas").getContext("2d");

            compose();

        }
        function compose()
        //adds the purple fill rectangle, adds the image and then animates the circle
        {
            context.globalCompositeOperation = 'destination-atop';
            fillRectangle(0, 0, 900, 600);
            context.globalCompositeOperation = 'destination-atop';
            context.drawImage(img, destX, destY);
            var cnt = 0;

            function runIteration() {
                if (x + dx + radius > width || x + dx < radius) {
                    dx = -dx;
                }
                if (y + dy + radius > height || y + dy < radius) {
                    dy = -dy;
                }
                x = x + dx;
                y = y + dy;
                circle(x, y);
                cnt++;
                if (cnt < 10000) {
                    context.globalCompositeOperation = 'destination-atop';
                    context.drawImage(img, destX, destY);
                    setTimeout(runIteration, 10);

                }
            }
            runIteration();

        }

        function fillRectangle(x, y, w, h)
        {
            context.fillStyle = "#550055";
            context.fillRect(x, y, w, h);
        }
        //draws the circle with center location at x,y
        function circle(x, y) {
            // context.globalAlpha=0.1;
            context.globalCompositeOperation = 'destination-out';

            context.fillStyle = "#444444";
            context.beginPath();
            context.arc(x, y, radius, 0, 2 * Math.PI, true);
            context.closePath();
            context.fill(); //setTimeout("context.fill();",3);

            context.globalCompositeOperation = 'destination-atop';
        }

        //draws a rectangle with width(w) & height(h) with top left corner at (x,y)
        function rectangle(x, y, w, h) {
            context.fillStyle = "#000000";
            context.strokeRect(x, y, w, h);
        }
        //clears the whole canvas
        function clear() {
            context.clearRect(0, 0, 800, 300);
        }
        window.addEventListener("load", init, true);
    </script>

4

1 回答 1

0

您的使用setTimeout()不是做事的正确方法。 setTimeout()是一个异步函数。它立即返回并安排稍后的工作。

编写代码时，整个 for 循环将立即运行，设置 1000 个setTimeout计时器。这不会减慢动画的速度，只会稍微延迟它的开始。

为了减慢动画的速度，您将不得不重新构建代码，以便在 a 中执行 for 循环的每次迭代，setTimeout()当超时完成并执行时，您可以安排setTimeout()下一次循环的下一次迭代。它会是这样的：

function compose()
//adds the purple fill rectangle, adds the image and then animates the circle
{
    context.globalCompositeOperation = 'destination-atop';
    fillRectangle(100, 100, 900, 500);
    context.globalCompositeOperation = 'destination-atop';
    context.drawImage(img, destX, destY);
    var cnt = 0;

    function runIteration() {
        if (x + dx + radius > width || x + dx < radius) {
            dx = -dx;
        }
        if (y + dy + radius > height || y + dy < radius) {
            dy = -dy;
        }
        x = x + dx;
        y = y + dy;
        circle(x, y);
        cnt++;
        if (cnt < 1000) {
            setTimeout(runIteration, 10);
        }
    }
    runIteration();
}
于 2011-11-10T03:02:23.150 回答