1
我的畫布動畫在鉻中像冰一樣光滑,但在Firefox中糟糕的髮型。最奇怪的是,這甚至不是一個複雜的計算。有沒有人看到我的代碼可能導致這種放緩的任何錯誤(性能相關)?畫布中的動畫片動畫
這是對的jsfiddle: http://jsfiddle.net/Wu5Jh/
這裏,它是這樣:
$(document).ready(function(){
//vars
var x = 20,
y = 20,
pi = Math.PI,
width,
height,
complete = 100,
refreshInterval,
ctx;
// computed vars
function init() {
ctx = $('#canvas')[0].getContext("2d");
width = $("#canvas").width();
height = $("#canvas").height();
center = [width/2, height/2];
refreshInterval = (function doSetTimeout(){
draw();
setTimeout(doSetTimeout, 30);
})();
};
function circle(x,y,r) {
// Draw the growing circle
ctx.fillStyle = "#09f";
ctx.beginPath();
ctx.moveTo(x, y); // center of the pie
ctx.arc(
x,
y,
r,
-2*pi*complete/100 + pi*1.5,
-pi*.5,
true
);
ctx.lineTo(x, y);
ctx.closePath();
ctx.fill();
// Draw the cutout
ctx.globalCompositeOperation = "xor";
ctx.fillStyle = "#fff";
ctx.beginPath();
ctx.arc(x,y,r/2,0,pi*2,true);
ctx.fill();
}
function clear() {
ctx.clearRect(0, 0, width, height);
}
function timeCheck(){
if (complete>0){
complete -= 1;
}
else {
clearInterval(refreshInterval);
}
}
function draw() {
clear();
circle(x, y, 20);
timeCheck();
}
init();
});
我希望避免Flash動畫或GIF,但我可能別無選擇。
謝謝!
對我而言Firefox 3.6.12上看起來不錯 – Reigel 2010-12-15 05:58:22
真的嗎?它在3.6.13,PC – Matrym 2010-12-15 06:04:06
大約3分給我打了個電話,認爲它很大程度上取決於你的計算機規格和當前負載。 – Orbling 2010-12-15 06:14:43