用于Javascript上动画的cancelAnimationFrame
您好，我正在尝试创建一个矩形，它从画布的侧面开始生长，直到填满整个画布，一旦完成，它会收缩回原始状态，我采用的方法是使用requestAnimationFrame/cancelAnimationFrame，出于某种原因，我不确定cancelAnimationFrame是否正常。我的代码如下：用于Javascript上动画的cancelAnimationFrame,javascript,animation,html5-canvas,Javascript,Animation,Html5 Canvas,您好，我正在尝试创建一个矩形，它从画布的侧面开始生长，直到填满整个画布，一旦完成，它会收缩回原始状态，我采用的方法是使用requestAnimationFrame/cancelAnimationFrame，出于某种原因，我不确定cancelAnimationFrame是否正常。我的代码如下： <script> function grRectangle(){ var canvas = document.getElementById("pa
<script>
function grRectangle(){
var canvas = document.getElementById("paper");
var context= canvas.getContext("2d");
//var forpi = Math.PI * 2;
//context.fillStyle = "black";
context.fillRect(0,0,canvas.width,canvas.height);
var posX = 200;
var posY = 100;
var color = 0;
function draw(){
context.fillStyle = 'hsl('+ color++ + ',100%,50%)';
context.beginPath();
context.rect(0,0,posX,posY);
context.fill();
posX = posX + 0.9;
posY = posY + 0.9;
if(posX < canvas.width ){
requestAnimationFrame(draw);
} if (posX >= canvas.width){
posX = posX - 0.9;
posY = posY - 0.9;
cancelAnimationFrame(draw);
}
}
draw();
};
</script>
<body onload= "grRectangle();" >
<h1>Growing Rectangle</h1>
<canvas id = "paper" width="800" height="600">
</canvas>
非常感谢您的任何帮助在我看来，您编写的代码实际上并不需要取消动画帧。我不确定你认为它确切的作用是什么，但似乎你误解了它 cancelAnimationFrame方法用于防止执行之前对requestAnimationFrame的调用，前提是该调用尚未执行。很少有情况下你需要这样做 在你的例子中，我将把每帧的增长常数0.9放入一个变量中。当矩形大小达到上限时，只需将其更改为-0.9，它就会再次变小。当它达到下限时，再次将其更改为0.9，它将再次增长
但是，您不会看到这种收缩，因为您没有擦除画布。每一帧都是在前一帧之上绘制的。必须在绘图循环开始时擦除画布。要做到这一点，请将用黑色矩形填充画布的代码移动到绘图循环中，记住将填充样式设置为黑色。您描述了代码应该执行的操作，但忘记了描述实际行为：它正在执行什么操作？