내 캔버스 애니메이션은 얼음처럼 부드럽지만 파이어 폭스의 나쁜 이발로 고르지 않습니다. 가장 이상한 것은 계산이 복잡하지 않다는 것입니다. 누구든지 내 속도 저하를 일으킬 수있는 코드와 함께 잘못된 (성능 관련) 것을 본 적이 있습니까?캔버스의 고르지 않은 애니메이션
는 여기가 jsfiddle에 : http://jsfiddle.net/Wu5Jh/
를 그리고 여기 너무입니다 : 나는 플래시 애니메이션 또는 GIF를 피하기 위해 기대했다
$(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();
});
,하지만 난 선택의 여지가 있습니다.
감사합니다.
Firefox 3.6.12에서 나에게 잘 보입니다. – Reigel
정말요? 그것은 3.6.13, PC – Matrym
에서 약 3 점을 나를 위해 위로 커브 그것은 컴퓨터의 사양 및 현재로드에 크게 의존 고려하십시오. – Orbling