javascript - 饼图 Canvas 动画在一帧上显示完整的圆

Question

我有类似增长/收缩动画的饼图，但在它的中间，在一帧上显示填充圆圈，我怎样才能摆脱它？

var canvas = document.querySelector('canvas');

var ctx = canvas.getContext('2d');
var increase = Math.PI * 2 / 100;
var max = Math.PI * 2;
var angle = 0;
var start = false;  
setInterval(function() {
  ctx.clearRect(0, 0, 32, 32);
  ctx.fillStyle = '#F00A0A';
  ctx.beginPath();
  if (start) {
    ctx.arc(16, 16, 12, angle, 0);
  } else {
    ctx.arc(16, 16, 12, 0, angle);
  }
  ctx.lineTo(16, 16);
  ctx.fill();
  angle += increase;
  if (angle >= max) {
    angle = 0;
    start = !start;
  }
}, 20);

<canvas width="32" height="32"/>

我已经尝试过这个:

  if (angle !== 0) {
    ctx.beginPath();

    if (start) {
      ctx.arc(16, 16, 12, angle, 0);
    } else {
      ctx.arc(16, 16, 12, 0, angle);
    }
    ctx.lineTo(16, 16);
    ctx.fill();
  }

但这不起作用，当圆弧改变一侧时，它会在一帧中显示完整的圆。

Answer 1

最简单的解决方案是稍微偏移 Angular 。

这样，当您更改绘图模式时，圆就不是“完整的”:

var canvas = document.body.appendChild(document.createElement('canvas'));
var canvasSize = canvas.width = canvas.height = 100;
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#F00A0A';
var increase = Math.PI * 2 / 100;
var max = Math.PI * 2;
var angle = 0.0000001;
var start = false;
function update() {
    ctx.clearRect(0, 0, canvasSize, canvasSize);
    ctx.beginPath();
    ctx.arc(canvasSize / 2, canvasSize / 2, canvasSize / 3, angle, 0, start);
    ctx.lineTo(canvasSize / 2, canvasSize / 2);
    ctx.fill();
    angle += increase;
    if (angle >= max) {
        angle = angle % max;
        start = !start;
    }
    requestAnimationFrame(update);
}
update();