HTML5 Canvas和JS帧率慢慢下降到0
HTML5 Canvas and JS Framerate slowly drops to 0
我正在尝试为游戏设置html 5画布,我的fps开始时很好,但后来它慢慢下降到0 fps并延迟浏览器窗口。我觉得我好像错过了一些很重要的东西。
JS我用来管理刷新和绘图:
var stop = false;
var frameCount = 0;
var $results = $("#stats");
var fps, fpsInterval, startTime, now, then, elapsed;
var $canvas = $("#gameWorld")[0];
var context = $canvas.getContext("2d");
startAnimating(30);
function startAnimating(fps) {
fpsInterval = 1000 / fps;
then = Date.now();
startTime = then;
console.log(startTime);
animate();
}
function animate() {
// stop
if (stop) {
return;
}
// request another frame
requestAnimationFrame(animate);
// calc elapsed time since last loop
now = Date.now();
elapsed = now - then;
// if enough time has elapsed, draw the next frame
if (elapsed > fpsInterval) {
then = now - (elapsed % fpsInterval);
// draw stuff here
draw();
// Statistics
var sinceStart = now - startTime;
var currentFps = Math.round(1000 / (sinceStart / ++frameCount) * 100) / 100;
$results.text("FPS: " + Math.round(currentFps));
}
}
function draw() {
context.clearRect(0, 0, width, height);
drawBackground();
}
// Draw grid background
function drawBackground() {
context.strokeStyle = '#e6ebf4';
context.lineWidth = 1;
var size = 50;
for(var i=0; i < width + size; i+=size) {
context.moveTo(i,0);
context.lineTo(i,height);
context.stroke();
}
for(var j=0; j < height + size; j+=size) {
context.moveTo(0,j);
context.lineTo(width,j);
context.stroke();
}
}
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
width = $canvas.width = window.innerWidth;
height = $canvas.height = window.innerHeight;
}
resizeCanvas();
这里是小提琴:https://jsfiddle.net/gf7kt8k8/
原因是,你没有清理你的路径。使用
context.beginPath();
在draw()
开头。这个问题之前有人问过
相关文章:
- 关键帧之间的css3动画延迟
- 画布:逐像素绘制图像并请求动画帧计时
- 访问css3动画的关键帧
- 正在从帧创建时间代码
- D3/Raphael js 以慢帧率绘制 1000+ 动画圆圈
- BlackBerry PlayBook网络作品:低帧率
- 尝试使用getUserMedia帧率约束
- 画布游戏帧率下降
- 用requestAnimationFrame实现一些稳定的帧率
- HTML5 Canvas和JS帧率慢慢下降到0
- 低帧率的JS和CSS动画
- 如何使用javascript获得良好的帧率
- EaselJS性能问题/帧率下降
- Javascript水涟漪效应减慢帧率
- 如何改变精灵帧率
- 动态调整paperjs动画的帧率
- 低帧率嵌套转换元素
- 使用JS和DOM设置多个DIV元素的动画会导致低帧率
- javascript游戏中的异步/可变帧率
- 函数计算函数帧率