画布：将圆圈分成水平条纹

Question

我试图找出将画布中的圆形分割成水平条纹的最佳方法。我有一个图像作为例子：

我的第一个想法是绘制一组矩形并用圆形剪裁/裁剪它。但我需要动画/缩放每个单独的条带。所以真的，我需要尝试做而不削减。

所以我考虑创建一条曲线/路径，但边缘需要遵循一个完美的圆圈。我可以用一些基本的数学方法来解决这个问题吗？

我已经完成了各种搜索，但是大多数资源都指向了饼图，这不是我之后的事情。我会继续搜索，但如果您有建议或资源我可以查看，我真的很感激！

由于

Answer 1

与abiessu提出的想法一起，这里是用弧和渐变实现该效果的一个例子。我为演示做了相同的步骤。这也表明它随着时间的推移动画：

<强> JSFiddle Demo

var canvas = document.createElement( 'canvas' ),
    ctx = canvas.getContext( '2d' ),
    width = canvas.width = 400,
    height = canvas.height = 400,
    baseRadius = 100,
    rangeRadius = 50,
    colors = [
      '#2c7ba4',
      '#2a8598',
      '#47949e',
      '#2d8b79',
      '#549d82',
      '#5c9270',
      '#899277',
      '#cec2ac'
    ],
    tick = 0;

function loop() {
  requestAnimationFrame( loop );
  ctx.clearRect( 0, 0, width, height );
  var radius = baseRadius + Math.sin( tick / 50 ) * rangeRadius,
      spacing = ( height - radius * 2 ) / 2,
      gradient = ctx.createLinearGradient( 0, spacing, 0, height - spacing ),
      colorsLength = colors.length,
      i;

  for( i = 0; i < colorsLength; i++ ) {
    var color = colors[ i ];
    gradient.addColorStop( i / colorsLength, color );
    gradient.addColorStop( ( i + 1 ) / colorsLength, color );
  }

  ctx.beginPath();
  ctx.arc( width / 2, height / 2, radius, 0, Math.PI * 2 );
  ctx.fillStyle = gradient;
  ctx.fill();

  tick++;
}

document.body.appendChild( canvas );
loop();

漂亮的调色板，顺便说一句！