javascript - Canvas 动画像素化

Question

我想在 Canvas 上制作弧形动画，它可以工作(使用非常基本的动画，间隔)，但结果非常像素化/前卫。在左侧我画了一个圆弧(动画)，在右侧没有动画(平滑)。

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);

在每个绘制循环中。

基本上，您在其自身上绘制相同的弧数百次。仅部分黑色的边缘像素会一遍又一遍地变暗，直到完全黑色。

像这样的事情几乎所有 Canvas 动画都会清除 Canvas 并为每次迭代绘制新鲜的内容。