🔰gradients

browser ⟩ canvas ⟩ graphics state ⟩ fill/stroke styles ⟩ gradient

⭐️ 重點

To fill (or stroke) with a gradient, set .fillStyle (or .strokeStyle) to a CanvasGradient object returned by: .createLinearGradient(), .createRadialGradient(), .createConicGradient().

after creating CanvasGradient object, define gradient colors by calling CanvasGradient.addColorStop() (at least twice), parameters:

• number：0 ~ 1

• color：CSS colors

The arguments to .createRadialGradient(): centers & radii of two circles:

• need not be concentric.

• first circle typically lies entirely inside the second.

• areas inside smaller circle or outside the larger are filled with solid colors.

Gradient coordinates are relative to the drawing (2D) context, NOT relative to a shape's local coordinates.

🔴 主題

• ctx.gradient() - create canvas gradients

📘 手冊

• CanvasRenderingContext2D ⟩

  • fill: .fillStyle

  • stroke: .strokeStyle

  • gradient: .createLinearGradient(), .createRadialGradient(), .createConicGradient()

• CanvasGradient ⟩ .addColorStop() - define gradient colors

👥 相關

• SVG ⟩ gradients

• CSS ⟩

  • CSS gradients

  • CSS colors - define gradient colors.