Path2D

• 功能說明： Canvas 2D API的接口Path2D用來聲明路徑，此路徑稍後會被CanvasRenderingContext2D對象使用，CanvasRenderingContext2D接口的路徑方法也存在於Path2D這個接口中，允許您在Canvas中根據需要創建可以保留並重用的路徑。

• 内容

  内容	類型	說明
  width	number	使用點數描述ImageData的實際寬度
  height	number	使用點數描述ImageData的實際高度
  data	Uint8ClampedArray	一維數組，包含以RGBA順序的數據，數據使用0至255（包含）的整數表示

方法集

addPath

TIP

該API使用方法為： Path2D.addPath(Path2D path)

• 功能說明： 添加路徑到當前路徑。
• 參數及說明： Path2D path，添加的Path2D路徑。

arc

TIP

該API使用方法為： Path2D.arc(number x, number y, number radius, number startAngle, number endAngle, boolean counterclockwise)

• 功能說明： 添加一段圓弧路徑。
• 參數及說明：
  • number x: 圓心橫坐標。
  • number y: 圓心縱坐標。
  • number radius: 圓形半徑，必須為正數。
  • number startAngle: 圓弧開始角度。
  • number endAngle: 圓弧結束角度。
  • boolean counterclockwise: 是否逆時針繪製，如果傳true，則會從endAngle開始繪製到startAngle。

arcTo

TIP

該API使用方法為： Path2D.arcTo(number x1, number y1, number x2, number y2, number radius)

• 功能說明： 通過給定控制點添加一段圓弧路徑。
• 參數及說明：
  • number x1: 第一個控制點橫坐標。
  • number y1: 第一個控制點縱坐標。
  • number x2: 第二個控制點橫坐標。
  • number y2: 第二個控制點縱坐標。
  • number radius: 圓形半徑，必須為非負數。

bezierCurveTo

TIP

該API使用方法為： Path2D.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)

• 功能說明： 添加三次貝塞爾曲線路徑。
• 參數及說明：
  • number cp1x: 第一個控制點橫坐標。
  • number cp1y: 第一個控制點縱坐標。
  • number cp2x: 第二個控制點橫坐標。
  • number cp2y: 第二個控制點縱坐標。
  • number x: 結束點橫坐標。
  • number y: 結束點縱坐標。

closePath

TIP

該API使用方法為： Path2D.closePath()

• 功能說明： 閉合路徑到起點。

ellipse

TIP

該API使用方法為： Path2D.ellipse(number x, number y, number radiusX, number radiusY, number rotation, number startAngle, number endAngle, boolean counterclockwise)

• 功能說明： 添加橢圓弧路徑。
• 參數及說明：
  • number x: 橢圓圓心橫坐標。
  • number y: 橢圓圓心縱坐標。
  • number radiusX: 橢圓長軸半徑，必須為非負數。
  • number radiusY: 橢圓短軸半徑，必須為非負數。
  • number rotation: 橢圓旋轉角度。
  • number startAngle: 圓弧開始角度。
  • number endAngle: 圓弧結束角度。
  • boolean counterclockwise: 是否逆時針繪製，如果傳true，則會從endAngle開始繪製到startAngle。

lineTo

TIP

該API使用方法為： Path2D.lineTo(number x, number y)

• 功能說明： 添加直線路徑。
• 參數及說明：
  • number x: 結束點橫坐標。
  • number y: 結束點縱坐標。

moveTo

TIP

該API使用方法為： Path2D.moveTo(number x, number y)

• 功能說明： 移動路徑開始點。
• 參數及說明：
  • number x: 橫坐標。
  • number y: 縱坐標。

quadraticCurveTo

TIP

該API使用方法為： Path2D.quadraticCurveTo(number cpx, number cpy, number x, number y)

• 功能說明： 添加二次貝塞爾曲線路徑。
• 參數及說明：
  • number cpx: 控制點橫坐標。
  • number cpy: 控制點縱坐標。
  • number x: 結束點橫坐標。
  • number y: 結束點縱坐標。

rect

TIP

該API使用方法為： Path2D.rect(number x, number y, number width, number height)

• 功能說明： 添加方形路徑。
• 參數及說明：
  • number x: 開始點橫坐標。
  • number y: 開始點縱坐標。
  • number width: 方形寬度，正數向右，負數向左。
  • number height: 方形高度，正數向下，負數向上。