HTML/Javascript requestAnimationFrame（）时间timestamp 的理解和FPS(Frames Per Second) 实现（附代码）

最新推荐文章于 2024-04-21 01:58:01 发布

北京维多

最新推荐文章于 2024-04-21 01:58:01 发布

阅读量1.2k

点赞数 1

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/m0_60558800/article/details/122569086

版权

requestAnimationFrame 函数不需要传入时间参数, 其刷新的频率一般是每秒60帧(FPS=60),这是大多数屏幕渲染的时间间隔,因此这也是游戏可以实现的最快的刷新频率。但有时我们希望FPS<60, 比如说30FPS, 或者更慢一些，这该如何实现呢？下面的代码即可以实现任意刷新频率FPS：

<body>
<canvas id="myCanvas" width="500" height="300" style="background:black;" ></canvas>	
<br>平均fps <input type="number" id="numberBox">

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = 'red';	
var moving_rect=function (x,y) {
	this.x=x;this.y=y;	this.len=50;
	this.dx=1;this.dy=1;
	this.draw=function(){
		this.x+=this.dx;
		this.y+=this.dy;
		//ctx.clearRect(0,0,canvas.width,canvas.height);
	   if (this.x>=(canvas.width-this.len)) {this.dx=-1;}
	   if (this.y>(canvas.height-this.len)) { this.dy=-1;}
	   if (this.x<=0) {this.dx=1;}
	   if (this.y<=0) { this.dy=1;}
       ctx.fillRect(this.x,this.y,this.len,this.len);
		}
	}		
	
var frameCount = 0;
var start = null;
var lasttime;
var fps=30;
var fpsInterval = 1000 / fps;


function animate(timestamp) {
 if (start===null) { start=timestamp;lasttime=start;}
 elapsed=timestamp-lasttime;
   
 if (elapsed>fpsInterval) {
	 lasttime=timestamp-(elapsed % fpsInterval);
	 
	 frameCount++;
	 totaltime=timestamp-start;	 
	 average_fps=1000*frameCount/totaltime;
	 document.getElementById("numberBox").value=average_fps;

	draw();
   } 
 requestAnimationFrame(animate);
}

const nr=new moving_rect(0,0);
const nr1=new moving_rect(100,250);
function draw() {
	ctx.clearRect(0,0,canvas.width,canvas.height);
	nr.draw();
	nr1.draw();
}	

requestAnimationFrame(animate);

关于其时间,即timestamp的理解，可以通过如下代码来实现：

<body>
<p id="output"></p>
<script>
var i = 0;
var start = null;
var times = [];
var lasttime;
function step(timestamp) {
 	if (start===null) start = timestamp;
dt=timestamp-lasttime; //dt=1000/60=16.67s
 	times[i++] = timestamp;
lasttime=timestamp;
if (i<10) {
  		requestAnimationFrame(step);
 } else {
  		document.getElementById('output').innerHTML = times.join('<br>');
 } 
}
requestAnimationFrame(step);
</script>
</body>

dt=timestamp-lasttime; //dt=1000/60=16.67s ，即是正常的60FPS

其显示的结果如下：

172.073=start
188.703
205.369
222.031
238.661
255.32
271.971
288.632
305.259
321.917

北京维多

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML/Javascript requestAnimationFrame（）时间timestamp 的理解和FPS(Frames Per Second) 实现（附代码）

requestAnimationFrame 函数不需要传入时间参数, 其刷新的频率一般是每秒60帧(FPS=60),这是大多数屏幕渲染的时间间隔,因此这也是游戏可以实现的最快的刷新频率。但有时我们希望FPS<60, 比如说30FPS, 或者更慢一些，这该如何实现呢？下面的代码即可以实现任意刷新频率FPS：...
复制链接

扫一扫

HTML/Javascript requestAnimationFrame（）时间timestamp 的理解和FPS(Frames Per Second) 实现（附代码）

“相关推荐”对你有帮助么？