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

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

当您更改绘图模式时，圆圈不会“完整”：

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

派画布动画在一帧上显示整圈

1 个答案: