画布动画像素化

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(x,y,width,height);

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

Answer 3

我发现我首先需要清理画布。

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