Javascript Reset processing.js

Javascript Reset processing.js,javascript,owl-carousel,processing.js,Javascript,Owl Carousel,Processing.js,我使用owlCarousel.js在滑块中添加了一个画布元素,我希望每次滑块滑动到新图像时,画布中的动画都会重置。是否可以通过设置超时来实现这一点?谢谢 代码: 您根本不需要设置超时。只需创建一个重置函数,将所有变量设置回其原始值。然后,在需要重置动画时调用该函数 var canvas = document.getElementById("c"); var processing = new Processing(canvas, function(processing) {

我使用owlCarousel.js在滑块中添加了一个画布元素,我希望每次滑块滑动到新图像时,画布中的动画都会重置。是否可以通过设置超时来实现这一点?谢谢

代码:

您根本不需要设置超时。只需创建一个重置函数,将所有变量设置回其原始值。然后,在需要重置动画时调用该函数

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;
    });