requestAnimFrame 60FPS in Chrome, 1FPS in FF
requestAnimFrame 60FPS in Chrome, 1FPS in FF
我最近用requestAnimFrame
创建了一个画布动画,对Chrome的结果非常满意,但在FF中,它看起来正在运行幻灯片。我不知道是什么导致了这个问题。
此外,当我将粒子数量从 500 减少到 <50 时,FF 中的动画很流畅,但仍然不是 60FPS。这是我的代码:
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
W = window.innerWidth,
H = window.innerHeight,
circles = [];
canvas.width = W;
canvas.height = H;
//Random Circles creator
function create() {
//Place the circles at the center
this.x = W/2;
this.y = H/2;
//Random radius between 2 and 6
this.radius = 2 + Math.random()*3;
//Random velocities
this.vx = -10 + Math.random()*20;
this.vy = -10 + Math.random()*20;
//Random colors
this.r = Math.round(Math.random())*255;
this.g = Math.round(Math.random())*255;
this.b = Math.round(Math.random())*255;
}
for (var i = 0; i < 500; i++) {
circles.push(new create());
}
function draw() {
//Fill canvas with black color
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(0,0,0,0.15)";
ctx.fillRect(0, 0, W, H);
//Fill the canvas with circles
for(var j = 0; j < circles.length; j++){
var c = circles[j];
//Create the circles
ctx.beginPath();
ctx.globalCompositeOperation = "lighter";
ctx.arc(c.x, c.y, c.radius, 0, Math.PI*2, false);
ctx.fillStyle = "rgba("+c.r+", "+c.g+", "+c.b+", 0.5)";
ctx.fill();
c.x += c.vx;
c.y += c.vy;
c.radius -= .05;
if(c.radius < 0)
circles[j] = new create();
}
}
function animate() {
requestAnimFrame(animate);
draw();
}
animate();
这是现场演示。我在这里做错了什么吗?
以下是在没有globalCompositeOperation
引用的情况下的工作方式:
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
W = window.innerWidth,
H = window.innerHeight,
circles = [];
canvas.width = W;
canvas.height = H;
//Random Circles creator
function create() {
//Place the circles at the center
this.x = W/2;
this.y = H/2;
//Random radius between 2 and 6
this.radius = 2 + Math.random()*3;
//Random velocities
this.vx = -10 + Math.random()*20;
this.vy = -10 + Math.random()*20;
//Random colors
this.r = Math.round(Math.random())*255;
this.g = Math.round(Math.random())*255;
this.b = Math.round(Math.random())*255;
}
for (var i = 0; i < 500; i++) {
circles.push(new create());
}
function draw() {
//Fill canvas with black color
ctx.fillStyle = "rgba(0,0,0,0.15)";
ctx.fillRect(0, 0, W, H);
//Fill the canvas with circles
for(var j = 0; j < circles.length; j++){
var c = circles[j];
//Create the circles
ctx.beginPath();
ctx.arc(c.x, c.y, c.radius, 0, Math.PI*2, false);
ctx.fillStyle = "rgba("+c.r+", "+c.g+", "+c.b+", 0.5)";
ctx.fill();
c.x += c.vx;
c.y += c.vy;
c.radius -= .05;
if(c.radius < 0)
circles[j] = new create();
}
}
function animate() {
requestAnimFrame(animate);
draw();
}
animate();
<canvas id="canvas"></canvas>
相关文章:
- Node.js's Buffer.writeFloatBE in Javascript
- Setting default onclick behavior for <img> tag in gene
- Lucene Search in Alfresco
- grep in JQuery to C#
- write HTML in JavaScript
- jQuery setTimeOut: in for-loop
- SetTimeout and clearTimeout in Javascript
- lightbox in html 5 and javascript
- HTMLInputElement in IE7
- Mongodb$in以与数组中相同的顺序获取结果
- element.dataset in Internet Explorer
- jQuery parent() in table
- Instagram oauth flow in angularjs
- In循环的In运算符前后
- 如何使用for in循环在javascript中显示对象中的对象
- Jquery change onchange in onload
- 重构 jQuery in JS 问题
- strongloop script.js run find in before delete方法:如何同步运行异步方法
- TicTacToe minimax AI in Javascript
- requestAnimFrame 60FPS in Chrome, 1FPS in FF