畫布動畫像素化

Question

我想要在畫布上創建動畫，並且它可以工作（具有非常基本的動畫，區間），但結果非常像素化/前衛。在左側，我畫了一條弧（動畫），在右側沒有動畫（平滑）。

的jsfiddle：http://jsfiddle.net/C8CXz/2/

function degreesToRadians (degrees) { 
    return degrees * (Math.PI/180);  
} 

function radiansToDegrees (radians) { 
    return radians * (180/Math.PI); 
} 

var canvas = document.getElementById('circle'); 
var ctx = canvas.getContext('2d'); 
var start = 0, end = 0; 
var int = setInterval(function(){ 
    end++; 
    ctx.beginPath(); 
    ctx.arc(80, 80, 50, degreesToRadians(0)-Math.PI/2, degreesToRadians(end)-Math.PI/2, false); 
    ctx.lineWidth = 10; 
    ctx.stroke(); 
    if(end >= 360) { 
     clearInterval(int);  
    } 
}, 10); 

ctx.beginPath(); 
ctx.arc(220, 80, 50, degreesToRadians(0)-Math.PI/2, degreesToRadians(360)-Math.PI/2, false); 
ctx.lineWidth = 10; 
ctx.stroke(); 

（原始簡單的代碼，不介意的草率）

Answer 1

您需要：

ctx.clearRect(0, 0, w, h); 

在每次抽獎循環。

基本上，你正在自己畫相同的弧幾百次。只有部分黑色的邊緣像素反覆變黑，直到它們完全變黑。

像這樣的事情是幾乎所有的畫布動畫清除畫布，併爲每次迭代繪製新鮮。

Answer 2

我發現我首先需要清除畫布。

ctx.clearRect(0, 0, canvas.width, canvas.height); 

Answer 3

嘗試清除繪製矩形每一幀

ctx.clearRect(x,y,width,height); 

http://jsfiddle.net/C8CXz/3/