html 复制canvas,HTML5画布 - 停止先前的requestAnimationFrame [复制](HTML5 Canvas – Stop previous requestAnimatio...

HTML5画布 - 停止先前的requestAnimationFrame [复制](HTML5 Canvas – Stop previous requestAnimationFrame [duplicate])

我正在使用HTML Canvas。 我希望只有在没有再次触发点击功能时才能请求新帧。 我想基本上我希望它“停止”之前的递归

document.addEventListener('click', function(){

[...]

var animate = function() {

if (the click event was NOT fired again) {

requestAnimationFrame(animate);

}

};

animate();

});

我该怎么办？

This question already has an answer here:

I'm using HTML Canvas. I want new frames to be requested only if the click function hasn't been fired again. Basically I want it to "stop" the previous recursiveness, I think

document.addEventListener('click', function(){

[...]

var animate = function() {

if (the click event was NOT fired again) {

requestAnimationFrame(animate);

}

};

animate();

});

How would I do this?

原文：https://stackoverflow.com/questions/39548103

更新时间：2019-11-13 19:12

最满意答案

你可以设置一个像rafId这样的全局变量，并在你调用rAF的行中使它成为像;

rafId = requestAnimationFrame(animate);

然后在需要时调用cancelAnimationFrame()如cancelAnimationFrame(rafId)

You can set a global variable like rafId and in the line you invoke rAF make it like;

rafId = requestAnimationFrame(animate);

then when needed invoke cancelAnimationFrame() like cancelAnimationFrame(rafId)

相关问答

你可以设置一个像rafId这样的全局变量，并在你调用rAF的行中使它成为像; rafId = requestAnimationFrame(animate);

然后在需要时调用cancelAnimationFrame()如cancelAnimationFrame(rafId) You can set a global variable like rafId and in the line you invoke rAF make it like; rafId = requestAnimationFr

...

启动/停止的一种方式就是这样 var requestId;

function loop(time) {

...

// do stuff

...

start();

}

function start() {

if (!requestId) {

requestId = window.requestAnimationFrame(loop);

}

}

function stop() {

if (requestId) {

...

刚刚找到解决方案，为了使three.js工作，必须将preserveDrawingBuffer保持为true renderer = new THREE.WebGLRenderer({

preserveDrawingBuffer: true

});

Just found the solution, in order to make three.js work, it is neccessary to keep the preserveDrawingBuffer as tr

...

问题是你没有告诉它要逆转。 你告诉它要退缩，它会在一个永无止境的循环中陷入困境。 改变你的代码，有一个可变的direction告诉它去哪里(上/下)：

var xLoc = 0;

var yLoc = 0;

var speed = 5;

var direction = 1; // Defaults to 'down'

window.requestAnimFrame = (function(cal

...

const fps = 5;

const delay = Math.ceil(1000 / fps);

let last = Date.now();

let now;

function step () {

now = Date.now();

if(now - last < delay) {

return requestAnimationFrame(step);

}

last = now;

update();

draw();

...

我已经更新了小提琴。 检查。 您没有使用动态x坐标。 https://jsfiddle.net/6j4c5dod/7/ function moveCarLeft(){

clearCanvas();

currentX = currentX - 0.1;

context.drawImage(car, currentX, canvasHeight/4, car.width*0.4, car.height*0.13);

}

I have updated the fiddle. Check. Yo

...

首先，从所有场景*函数中删除currentScene = n 改变场景四如下 function sceneFour() {

//... removed for brevity

if (currentScene == 4) {

requestAnimationFrame(sceneFour);

} else {

sceneOne();

}

}

必须这样做，否则你可以结束sceneFour最后一帧frame of clobbering

...

问题是你无法访问context.width和context.height 。 因此，这将导致clearRect方法失败，并且将圆圈画在另一个圆圈上。 使用canvas.width和canvas.height 。 var canvas = $('canvas')[0]

var context = canvas.getContext('2d');

var game_loop

function draw() {

context.clearRect(0, 0, canvas.width,

...

这没有本机功能。 但是您可以通过使用context.getImageData来获取画布数据的原始RGBA值数组，对该数据执行过滤操作，然后使用context.putImageData将其写回来实现自己的图像过滤操作。 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation There is no native function to do that.

...

沿路径设置对象动画的一种方法是沿该路径计算多点。 然后，对于每个动画循环，将对象前进到下一个多边形点。 这是一个演示： http ： //jsfiddle.net/m1erickson/RtXq6/ 例如，您的圆柱管路径可能具有如下定义的线段： var pathArray=[]

pathArray.push({x:25, y:250});

pathArray.push({x:150,y:250});

pathArray.push({x:150,y:50});

pathArray.push({x:2

...