> 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/gradient.md).

# gradients

[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) ⟩ gradient

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
To <mark style="color:yellow;">**fill**</mark> (or <mark style="color:yellow;">**stroke**</mark>) with a <mark style="color:orange;">**gradient**</mark>, set [.fillStyle](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle) (or [.strokeStyle](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle)) to a [CanvasGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient) object returned by:  [.createLinearGradient()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient), [.createRadialGradient()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient), [.createConicGradient()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createConicGradient).
{% endhint %}

{% hint style="success" %}
after creating [CanvasGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient) object, define <mark style="color:yellow;">**gradient colors**</mark> by calling [CanvasGradient.addColorStop()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient/addColorStop) (at least twice), parameters:

* number：<mark style="color:yellow;">**0 \~ 1**</mark>&#x20;
* color：[colors](/web/css/values/colors.md)
  {% endhint %}

{% hint style="warning" %}
The <mark style="color:yellow;">**arguments**</mark> to [.createRadialGradient()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient):  <mark style="color:orange;">**centers**</mark> & <mark style="color:orange;">**radii**</mark> of <mark style="color:yellow;">**two circles**</mark>:

* need <mark style="color:red;">**not**</mark> be <mark style="color:orange;">**concentric**</mark>.
* **first circle** <mark style="color:orange;">**typically**</mark> <mark style="color:yellow;">**lies entirely**</mark> inside the **second**.
* areas <mark style="color:orange;">**inside**</mark>**&#x20;smaller circle** or <mark style="color:orange;">**outside**</mark>**&#x20;the larger** are filled with <mark style="color:yellow;">**solid colors**</mark>.
  {% endhint %}

{% hint style="danger" %} <mark style="color:yellow;">**Gradient coordinates**</mark> are relative to the [drawing (2D) context](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D), <mark style="color:red;">**NOT**</mark> relative to a <mark style="color:orange;">**shape's local coordinates**</mark>.
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}

* [ctx.gradient()](/web/browser/canvas/state/styles/gradient/ctx.gradient.md) - create canvas gradients
  {% endtab %}

{% tab title="📘 手冊" %}

* [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) ⟩&#x20;
  * fill: [.fillStyle](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle)
  * stroke: [.strokeStyle](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle)
  * gradient: [.createLinearGradient()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient), [.createRadialGradient()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient), [.createConicGradient()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createConicGradient)
* [CanvasGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient) ⟩ [.addColorStop()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient/addColorStop) - define gradient colors
  {% endtab %}

{% tab title="👥 相關" %}

* [SVG](/web/browser/svg.md) ⟩ [gradients](/web/browser/svg/gradient.md)
* [CSS](/web/css.md) ⟩&#x20;
  * [gradients](/web/css/values/gradients.md)
  * [colors](/web/css/values/colors.md) - define gradient colors.
    {% endtab %}
    {% endtabs %}