首页用requestAnimationFrame方法改编一下这个程序

用requestAnimationFrame方法改编一下这个程序

时间: 2023-12-06 20:38:04 浏览: 116

使用requestAnimationFrame实现js动画性能好

requestAnimationFrame优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销，这篇文章给大家详细介绍使用requestAnimationFrame实现js动画

根据提供的引用内容，我们可以得知在使用requestAnimationFrame方法时需要注意以下几点： 1. 需要定义一个全局变量animationFrameID来存储requestAnimationFrame方法返回的ID，以便在后续使用cancelAnimationFrame方法停止动画。 2. 在requestAnimationFrame方法中需要递归调用自身，以实现动画的连续播放。 3. 在每次递归调用时需要更新球的位置和速度。下面是一个使用requestAnimationFrame方法改编的程序： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用requestAnimationFrame方法改编的程序</title> <style> #canvas { border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var x = canvas.width / 2; var y = canvas.height - 30; var dx = 2; var dy = -2; var ballRadius = 10; var animationFrameID; function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBall(); x += dx; y += dy; if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { dx = -dx; } if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { dy = -dy; } animationFrameID = requestAnimationFrame(draw); } draw(); </script> </body> </html> ```

阅读全文