重置 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() 函数，将所有变量设置回其原始值。然后在您想要重置动画时调用该函数。