您好,我正在尝试创建一个从画布侧面增长的矩形,直到它填满整个画布,一旦完成收缩到原始状态,我正在采取的方法是使用 requestAnimationFrame/cancelAnimationFrame 出于某种原因我不确定 cancelAnimationFrame 似乎不起作用,我的代码如下:
<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。我不确定你认为它到底做了什么,但似乎你误解了它。
cancelAnimationFrame 方法用于防止执行以前对 requestAnimationFrame 的调用,只要这还没有发生。实际上很少有需要这种情况。
在您的情况下,我会将每帧增长常数0.9
放入一个变量中。当矩形大小达到上限时,只需将其更改为-0.9
,它就会再次变小。当它到达下限时,再次将其更改为0.9
,它将再次增长。
但是,您不会看到这种收缩,因为您没有擦除画布。每一帧都绘制在前一帧之上。您必须在绘图循环开始时擦除画布。为此,请将用黑色矩形填充画布的代码移动到绘图循环中(请记住将填充样式设置为黑色)。