Javascript Reset processing.js
我使用owlCarousel.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) {
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;
});