✨color wheel

browser ⟩ canvas ⟩ graphics state ⟩ fill/stroke styles ⟩ colors ⟩ color wheel

💾 程式

color wheel (12 colors)

💾 replit：color wheel

⬆️ require： drawOnCanvas2D()

function deg(x) { return Math.PI * x / 180 }   // degrees

// color wheel
function colorWheel(n) {
    // draw on canvas
    drawOnCanvas2D('#playground', (ctx) => {

        const dt = deg(360) / n;
        const dh = 360 / n;
        const r = 100;
        const dx = 20;
        const center = [r + dx, r + dx];

        for (let i = 0; i < n; i++) {
            const angle = deg(-90) + dt * i;
            const range = [angle - dt / 2, angle + dt / 2];
            const hue = dh * i;
            ctx.beginPath();
            ctx.moveTo(...center);
            ctx.arc(...center, r, ...range);
            ctx.fillStyle = `hsl(${hue} 100% 50%)`;
            ctx.fill();
        }

    });
}

// 12-color color wheel
colorWheel(12);

📗 參考

• MDN ⟩ Canvas tutorial ⟩ Applying styles and colors