Question

我想要在画布上制作一个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();

（原始的简单代码，不介意邋iness）

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

画布动画像素化

3 个答案: