我如何确定canvas的缓慢性能是由绘图本身引起的,还是由计算应该在哪里绘制的底层逻辑引起的?
我的第二个问题是:如何计算canvas的帧率?以下是我的方法,对我来说似乎很合理,但我也可能完全错误。这是正确的做法吗?
var fps = 0;
setInterval(draw, 1000/30);
setInterval(checkFps, 1000);
function draw() {
//...
fps++;
}
function checkFps() {
$("#fps").html(fps);
fps = 0;
}
编辑: 根据Nathan的评论,我将上述内容替换为以下内容:
var lastTimeStamp = new Date().getTime();
function draw() {
//...
var now = new Date().getTime();
$("#fps").html(Math.floor(1000/(now - lastTimeStamp)));
lastTimeStamp = now;
}
这个怎么样?你也可以只计算自上次更新以来的毫秒差异,这样也可以看到性能差异。顺便说一下,我还进行了两者的并排比较,它们通常几乎同时移动(最多相差2),但后者在性能非常低时有更大的波峰。