重置processing.js

Question

我使用owlCarousel.js在滑块中添加了一个画布元素，我希望每次滑块滑到新图像时，画布中的动画都会重置。有没有可能用setTimeout做到这一点？谢谢。

代码：

var canvas = document.getElementById("c");
    var processing = new Processing(canvas, function(processing) {
        processing.size(window.innerWidth, window.innerHeight);
        processing.background(0xFFF);

        var mouseIsPressed = false;
        processing.mousePressed = function () { mouseIsPressed = true; };
        processing.mouseReleased = function () { mouseIsPressed = false; };

        var keyIsPressed = false;
        processing.keyPressed = function () { keyIsPressed = true; };
        processing.keyReleased = function () { keyIsPressed = false; };

        function getImage(s) {
            var url = "./imgs/" + s + ".png";
            processing.externals.sketch.imageCache.add(url);
            return processing.loadImage(url);
        }

        with (processing) {

        noStroke(); 
        var y = 700;
        var y2 = 700;
        var draw = function (){
            background(235,123,89);
            var clouds = getImage("clouds");
            image(clouds, mouseX, 0);
            image(clouds, mouseX + 800, 0);
            var mountain = getImage("mountain2");
            image(mountain, 800, y);
            var mountain1 = getImage("mountain1");
            image(mountain1, 700, y2);
            y -= 10;
            y2 -= 10;
            if(y < 70){
                y += 10;
            } if(y2 < 400){
                y2 += 10;
            }
        }
    }
        if (typeof draw !== 'undefined') processing.draw = draw;
    });

Answer 1

您根本不需要setTimeout()。只需创建一个reset()函数，将所有变量设置回其原始值。然后，无论何时要重置动画，都可以调用该函数。