javascript - Canvas :将圆分成水平条

我正在尝试找出将画布中的圆形形状分成水平条的最佳方法。我以图片为例：



我的第一个想法是绘制一组矩形，然后将其剪切/裁剪为圆形。但是我需要为每个单独的条带设置动画/缩放比例。所以说真的，我需要尝试并且不要裁剪。

因此，我想到了创建一条曲线/路径，但是边缘需要遵循一个完美的圆。我可以使用一些基本的数学方法来解决这个问题吗？

我已经进行了各种搜索，但是大多数资源都指向饼图，而这并不是我所追求的。我将继续搜索，但是如果您有建议或资源，我可以调查一下，我们将不胜感激！

谢谢

最佳答案

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

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