🔰path

browser ⟩ canvas ⟩ path

A path is a sequence of one or more subpaths. A subpath is a sequence of two or more points connected by lines or curves.

⭐️ 重點

• .beginPath() - begin a new path.

• .moveTo() - begin a new subpath.

• .closePath() - add line to start of current subpath.

• stroke() and fill() operate on all subpaths in the current path.

• remember to call beginPath() when you want to begin another new path❗️

When you call fill(), any open shapes are closed automatically, so you don't have to call .closePath().

Before rect(x, y, width, height) is executed, the .moveTo() method is automatically called with the parameters (x,y).

🔴 主題

• main concepts

  • open/closed subpaths

  • nonzero winding rule

• custom extension

  • Canvas+ext ⭐

• related methods

  • arcTo()

• examples

  • curves

📘 手冊

• CanvasRenderingContext2D ⟩

  • path / subpath

    • .beginPath() - begin new path.

    • .moveTo() - begin new subpath.

    • .lineTo()

    • .closePath() - add line to start of current subpath.

  • drawing path:

    • .fill(), .stroke()

    • .drawFocusIfNeeded()

  • fill / stroke styles:

    • .fillStyle, .strokeStyle,

  • line styles:

    • .lineWidth, .lineCap, .lineJoin, .miterLimit

    • dash: .setLineDash(), .getLineDash(), .lineDashOffset

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

• Path2D

👥 相關

• SVG ⟩ <path>