Question

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

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

当我尝试使用setTimeout（func（），以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>

Answer 1

使用setTimeout()不是正确的做事方式。 setTimeout()是一个非同步功能。它会立即返回并安排它的工作以供日后使用。

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

要减慢动画速度，您必须重新构建代码，以便在setTimeout()中执行for循环的每次迭代，并在超时完成并执行时，然后安排下一个{{1}与循环的下一次迭代。它会是这样的：

setTimeout()

globalCompositeOperation和setTimeout的问题

1 个答案: