我試圖在對角線方向上在畫布上畫一個圓圈。我正在使用requestanimationframe。它可以在所有瀏覽器中順利運行,但不能在Firefox中運行。動畫正在持續閃爍。請有人告訴我我在做什麼錯。我需要在Firefox中以合理的速度流暢使用animatin。Firefox中的requestAnimationFrame閃爍問題
這裏是我的簡單的代碼,也許有人能指出我是缺少在這裏..:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/*html { background: #000; }*/
</style>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000/60);
};
})();
window.cancelRequestAnimFrame = (function() {
return window.cancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
clearTimeout
})();
var canvas, context, toggle;
var ctr = 0;
var request;
var x = 10;
var y = 10;
init();
animate();
function init() {
canvas = document.createElement('canvas');
canvas.width = 512;
canvas.height = 512;
context = canvas.getContext('2d');
document.body.appendChild(canvas);
}
function animate() {
request = requestAnimFrame(animate);
draw();
}
function draw() {
context.clearRect(0,0,canvas.width,canvas.height);
y+=2;
x+=2;
context.beginPath();
context.arc(x, y, 3, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
//cancelRequestAnimFrame(request);
}
</script>
</body>
</html>
我期待一個非常快速的回答這個問題的方案是非常簡單的。在Firefox中不可能有平滑的html5 canvas動畫嗎?爲什麼它很難在Firefox中完成它,我想知道! – user1655003
我在Mac上看不到Firefox 18中的閃爍。你使用的是哪個版本的Firefox? –
我剛剛在windows pc上的Firefox 18上試了一下。這不光滑。它在Chrome中完美工作,但在Firefox中我可以看到它不光滑。也許這是最好的Firefox可以做的。我的客戶使用Firefox,所以我必須對這個問題做點事情!在這個例子中,我把一個簡單的圓形場景移動到畫布上。我的實際項目包含圖像背景和每個循環迭代中的offcourse javascript邏輯。在Chrome中,IE和safari都運行良好。有任何想法嗎!! – user1655003