19
2020
01

显示fps

做canvas相关的东西,测试性能肯定要看fps,电脑端用浏览器就可以,移动端就不方便了。

也不需要特别复杂的功能,能显示fps就可以,自己封装了一个简单的fps显示功能模块。

先看效果

html中使用方式:

<script type="text/javascript" src = "http://hanyeah.com/js/fps.js"></script>
<script type="text/javascript">
	var fps = new Fps().show();
</script>

js代码如下:

function Fps() {
	var tf = document.createElement("div");
	tf.style.color = "red";
	tf.style.position = "absolute";
	tf.style.left = "10px";
	tf.style.top = "10px";
	tf.style.fontSize = "16px";
	var fps = 0;
	var n = 0;
	var t = 0;
	var id;

	function loop() {
		n++;
		var t0 = new Date().getTime();
		if (t0 - t > 1000) {
			fps = n;
			n = 0;
			t += 1000;
		}
		tf.innerHTML = "FPS:" + fps;
		id = requestAnimationFrame(loop);
	}

	this.show = function() {
		if(id) {
			return this;
		}
		t = new Date().getTime();
		n = 0;
		fps = 0;
		id = requestAnimationFrame(loop);
		if(document.body) {
			document.body.appendChild(tf);
		} else {
			window.addEventListener("load", function(){
				document.body.appendChild(tf);
			});
		}
		return this;
	}

	this.remove = function() {
		if(id){
			cancelAnimationFrame(id);
			id = null;
		}
		if(tf.parentNode) {
			tf.parentNode.removeChild(tf);
		}
	}
}


« 上一篇

相关文章:

js保留有效数字  (2019-7-30 15:32:12)

js的parseInt方法  (2019-2-15 9:12:44)

闪电效果  (2017-11-28 15:4:19)

js中判断一个对象的类型  (2017-3-30 14:27:35)

解九连环  (2016-12-1 20:58:11)

DataURL与File,Blob,canvas对象之间的互相转换的Javascript  (2016-11-25 14:58:41)

js生成条形码-barcode  (2016-10-12 15:59:51)

GeoJSON格式  (2016-9-23 13:28:44)

使用Typescript开发基于createjs的项目  (2016-8-25 9:54:40)

github上一个js实现的编译器  (2016-8-17 14:32:19)

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。