教程
本站左上角的fps就是效果。
做到这个很简单
直接将以下代码加到博客底部就完工了
代码语言:javascript复制$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){
var requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};
var e,pe,pid,fps,last,offset,step,appendFps;
fps = 0;
last = Date.now();
step = function(){
offset = Date.now() - last;
fps = 1;
if( offset >= 1000 ){
last = offset;
appendFps(fps);
fps = 0;
}
requestAnimationFrame( step );
};
appendFps = function(fps){
console.log(fps 'FPS');
$('#fps').html(fps 'FPS');
};
step();
})();
注意这是JavaScript代码
需要加在 <script></script>
标签内
出现运行报错可能是本站调用了jQuery调用即可或者自己懂代码的可以改一下
原文地址:https://cloud.tencent.com/developer/article/2234189