javascript - Canvas :将圆拆分为水平条

Question

我正在尝试找出将 Canvas 中的圆形拆分为水平 strip 的最佳方法。我有一个图像作为例子:

我的第一个想法是绘制一组矩形并用圆形剪辑/裁剪它。但我需要为每个单独的 strip 设置动画/缩放。所以真的，我需要尝试在不剪裁的情况下进行。

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

我进行了各种搜索，但大多数资源都指向饼图，这不是我想要的。我会继续搜索，但如果您有我可以研究的建议或资源，我将不胜感激!

谢谢

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

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