Холст: Разделить круг на горизонтальные полосы

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

Nice цветовой палитры, кстати!