[英]Reset processing.js
我使用owlCarousel.js在滑块内添加了canvas元素,并且希望每次滑块滑动到新图像时重置画布中的动画。 是否可以使用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;
});
您根本不需要setTimeout()
。 只需创建一个reset()
函数即可将所有变量设置回其原始值。 然后,只要您想重置动画,就调用该函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.