🔰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：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.

🔴 主題

📘 手冊

👥 相關