画布动画像素化答案

【问题标题】：Canvas animation pixelated画布动画像素化
【发布时间】：2014-01-09 07:14:30
【问题描述】：

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

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

（原始的简单代码，不要介意马虎）

【问题讨论】：

标签： javascript animation canvas

【解决方案1】：

你需要一个：

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

在每个绘制循环中。

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

这样的事情几乎所有画布动画都会清除画布并在每次迭代时重新绘制。

【讨论】：

【解决方案2】：

尝试清除每一帧上的绘图矩形

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：