Path2D

• Functional description: Canvas 2D API interface Path2D is used to declare a path, which will be used by the CanvasRenderingContext2D object later. The path method of the CanvasRenderingContext2D interface also exists in the Path2D interface, allowing you to create paths that can be retained and reused in Canvas as needed.

• Properties

  Properties	Type	Description
  width	number	Use pixels to describe the actual width of ImageData
  height	number	Use pixels to describe the actual height of ImageData
  data	Uint8ClampedArray	One-dimensional array containing data in RGBA order, and the data is represented by integers from 0 to 255 (inclusive)

Method set

addPath

TIP

The API usage is as follows: Path2D.addPath(Path2D path)

• Functional description: Add a path to the current path.
• Parameters and descriptions: Path2D path，Added Path2D path.

arc

TIP

The API usage is as follows: Path2D.arc(number x, number y, number radius, number startAngle, number endAngle, boolean counterclockwise)

• Functional description: Add a circular arc path.
• Parameters and descriptions:
  • number x: The horizontal coordinate of the center of the circle.
  • number y: The vertical coordinate of the center of the circle.
  • number radius: The radius of the circle, which must be a positive number.
  • number startAngle: The starting angle of the arc.
  • number endAngle: The ending angle of the arc.
  • boolean counterclockwise: Whether to draw counterclockwise, if true, it will start from endAngle to startAngle.

arcTo

TIP

The API usage is as follows: Path2D.arcTo(number x1, number y1, number x2, number y2, number radius)

• Functional description: Add an arc path through the given control points.
• Parameters and descriptions:
  • number x1: The horizontal coordinate of the first control point.
  • number y1: The vertical coordinate of the first control point.
  • number x2: The horizontal coordinate of the second control point.
  • number y2: The vertical coordinate of the second control point.
  • number radius: The radius of the circle, must be non-negative.

bezierCurveTo

TIP

The API usage is as follows: Path2D.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)

• Functional description: Add a cubic Bezier curve path.
• Parameters and descriptions:
  • number cp1x: The horizontal coordinate of the first control point.
  • number cp1y: The vertical coordinate of the first control point.
  • number cp2x: The horizontal coordinate of the second control point.
  • number cp2y: The vertical coordinate of the second control point.
  • number x: The horizontal coordinate of the end point.
  • number y: The vertical coordinate of the end point.

closePath

TIP

The API usage is as follows: Path2D.closePath()

• Functional description: Close the path to the starting point.

ellipse

TIP

The API usage is as follows: Path2D.ellipse(number x, number y, number radiusX, number radiusY, number rotation, number startAngle, number endAngle, boolean counterclockwise)

• Functional description: Add an elliptical arc path.
• Parameters and descriptions:
  • number x: The horizontal coordinate of the center of the ellipse.
  • number y: The vertical coordinate of the center of the ellipse.
  • number radiusX: The radius of the major axis of the ellipse, must be non-negative.
  • number radiusY: The radius of the minor axis of the ellipse, must be non-negative.
  • number rotation: The rotation angle of the ellipse.
  • number startAngle: The starting angle of the arc.
  • number endAngle: The ending angle of the arc.
  • boolean counterclockwise: Whether to draw counterclockwise, if true, it will start from endAngle to startAngle.

lineTo

TIP

The API usage is as follows: Path2D.lineTo(number x, number y)

• Functional description: Add a straight path.
• Parameters and descriptions:
  • number x: The horizontal coordinate of the end point.
  • number y: The vertical coordinate of the end point.

moveTo

TIP

The API usage is as follows: Path2D.moveTo(number x, number y)

• Functional description: Move the starting point of the path.
• Parameters and descriptions:
  • number x: The horizontal coordinate.
  • number y: The vertical coordinate.

quadraticCurveTo

TIP

The API usage is as follows: Path2D.quadraticCurveTo(number cpx, number cpy, number x, number y)

• Functional description: Add a quadratic Bezier curve path.
• Parameters and descriptions:
  • number cpx: The horizontal coordinate of the control point.
  • number cpy: Control point ordinate.
  • number x: The horizontal coordinate of the end point.
  • number y: The vertical coordinate of the end point.

rect

TIP

The API usage is as follows: Path2D.rect(number x, number y, number width, number height)

• Functional description: Add square path.
• Parameters and descriptions:
  • number x: Start point ordinate.
  • number y: Start point ordinate.
  • number width: Square width, positive number goes right, negative number goes left.
  • number height: Square height, positive number goes down, negative number goes up.