> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/canvas/state/styles/colors/color-wheel.md).

# color wheel

[browser](/web/browser.md) ⟩ [canvas](/web/browser/canvas.md) ⟩ [graphics state](/web/browser/canvas/state.md) ⟩ [fill/stroke styles](/web/browser/canvas/state/styles.md) ⟩ [colors](/web/browser/canvas/state/styles/colors.md) ⟩ color wheel

{% tabs %}
{% tab title="💾 程式" %}
![color wheel (12 colors)](https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FMo4FkF5SDp6SoVoQA5k6%2Fcolor%20wheel.png?alt=media\&token=74b5a265-1150-450b-8c86-5d7a4ef57319)

:floppy\_disk: replit：[color wheel](https://replit.com/@pegasusroe/canvas-color-wheel#script.js)

⬆️ require： [drawOnCanvas2D()](/web/browser/canvas/+ext/drawoncanvas2d.md)

```javascript
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);
```

{% endtab %}

{% tab title="📗 參考" %}

* [ ] MDN ⟩ [Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial) ⟩ [Applying styles and colors](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)
  {% endtab %}
  {% endtabs %}