画布：将圆圈分成水平条

Posted 2023-03-05

【中文标题】画布：将圆圈分成水平条

【英文标题】：Canvas: Split circle into horizontal strips

【发布时间】：2014-10-08 10:18:07

【问题描述】：

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

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

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

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

谢谢

【问题讨论】：

您是否考虑过使用从一种颜色到另一种颜色的零宽度变化的渐变？

感谢您的评论。我需要每个单独的部分都是可移动/独立的。除非我们可以用渐变来做到这一点？一个示例是饼图段上的翻转。

【参考方案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();

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

【讨论】：

@Loktar 谢谢！在这里踏上你的地盘；） 17k+ 代表？你疯了。

感谢您的辛勤工作。看起来也很酷:)。但是，我需要实际的圆是静态的，而圆的部分是可移动的或分段的？我想一个例子是当你滚动一个饼图段时？

@Patch5216 啊，我明白了。让我考虑一下。另外，您是否有指向此类运动示例的链接，例如饼图？我想我知道你的意思，只是想确定一下。

嗨@jackrugile，感谢您的回复！此处页面顶部有一个饼图：developers.google.com/chart 和其他一些示例：chartjs.org。如果您悬停/翻转，您会明白我的意思。它们都运行良好，但我只是不确定如何水平或垂直分割它：S

啊，我明白了，所以您希望它像那些饼图一样工作，每个部分都可以独立处理，但您将只是水平条带，而不是像普通饼图那样从中心构建。这很难，会考虑;）