画布：将圆圈分成水平条

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

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