Анимация холста pixelated

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

Try очистка чертежа прямоугольник на каждом кадре

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

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