- Release Notes and Announcements
- Product Introduction
- About Platform Prerequisites
- Guidelines for Code Integration
- Get Demo and SDK
- Accessing via Android Devices
- Accessing via iOS Devices
- Guide to Mini Program Development
- Mini program introduction and development environment
- Mini program code composition
- Framework
- API
- API Overview
- Fundamentals
- Routing
- Redirect
- Forwarding
- Interface
- Network
- Data Caching
- Data Analysis
- canvas
- Media
- WXML
- File
- Device
- Contact person
- Vibration
- Battery Level
- Screen
- Memory
- Device Orientation
- Accessibility
- Network
- Keyboard
- Phone number
- Accelerometer
- Compass
- Gyroscope
- SMS
- Code scanning
- Encryption
- NFC－Ndef
- NFC－NfcA
- NFC－NfcB
- NFC－NfcF
- NFC－NfcV
- WiFi
- Calendar
- Clipboard
- NFC－getNFCAdapter
- NFC－NFCAdapter
- NFC－IsoDep
- NFC－MifareClassic
- NFC－MifareUltralight
- Bluetooth - Low Energy Central Device
- Bluetooth - Low Energy Peripheral Device
- Bluetooth - Beacon
- Bluetooth - General
- Location
- Open Interfaces
- Custom APIs
- Sensitive API
- Components
- Open source component statement
- FAQs
- Release Notes and Announcements
- Product Introduction
- About Platform Prerequisites
- Guidelines for Code Integration
- Get Demo and SDK
- Accessing via Android Devices
- Accessing via iOS Devices
- Guide to Mini Program Development
- Mini program introduction and development environment
- Mini program code composition
- Framework
- API
- API Overview
- Fundamentals
- Routing
- Redirect
- Forwarding
- Interface
- Network
- Data Caching
- Data Analysis
- canvas
- Media
- WXML
- File
- Device
- Contact person
- Vibration
- Battery Level
- Screen
- Memory
- Device Orientation
- Accessibility
- Network
- Keyboard
- Phone number
- Accelerometer
- Compass
- Gyroscope
- SMS
- Code scanning
- Encryption
- NFC－Ndef
- NFC－NfcA
- NFC－NfcB
- NFC－NfcF
- NFC－NfcV
- WiFi
- Calendar
- Clipboard
- NFC－getNFCAdapter
- NFC－NFCAdapter
- NFC－IsoDep
- NFC－MifareClassic
- NFC－MifareUltralight
- Bluetooth - Low Energy Central Device
- Bluetooth - Low Energy Peripheral Device
- Bluetooth - Beacon
- Bluetooth - General
- Location
- Open Interfaces
- Custom APIs
- Sensitive API
- Components
- Open source component statement
- FAQs
Function Description: The Path2D interface of the Canvas 2D API is utilized to declare paths, which will subsequently be employed by the CanvasRenderingContext2D object. The path methods of the CanvasRenderingContext2D interface are also present within the Path2D interface, permitting the creation of retainable and reusable paths in the Canvas as per necessity.
Attribute
Attributes | Types | Note |
width | number | Describing the actual width of ImageData using pixels. |
height | number | Describing the actual height of ImageData using pixels. |
data | Uint8ClampedArray | A one-dimensional array containing data in RGBA order, represented by integers ranging from 0 to 255 (inclusive). |
Method Set
addPath
The method is utilized as Path2D.addPath(Path2D path).
Function Description: Adds a path to the current path.
Parameters and Description: Path2D path, the Path2D path to be added.
arc
The method is employed as Path2D.arc(number x, number y, number radius, number startAngle, number endAngle, boolean counterclockwise).
Function Description: Incorporates an arc path segment.
Parameters and Descriptions:
number x: The x-coordinate of the circle's center.
number y: The y-coordinate of the circle's center.
number radius: The radius of the circle, which must be a positive number.
number startAngle: The starting angle of the arc.
number endAngle: The terminating angle of the arc.
boolean counterclockwise: Determines if the drawing is in a counterclockwise direction. If set to true, the drawing will commence from the endAngle and proceed to the startAngle.
arcTo
The method is utilized as follows: Path2D.arcTo(number x1, number y1, number x2, number y2, number radius)
Function Description: Adds an arc path by specifying control points.
Parameters and Descriptions:
number x1: The x-coordinate of the first control point.
number y1: The y-coordinate of the first control point.
number x2: The x-coordinate of the second control point.
number y2: The y-coordinate of the second control point.
number radius: The radius of the circle, which must be a non-negative number.
bezierCurveTo
The method is utilized as follows: Path2D.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
Function Description: Adds a cubic Bezier curve path.
Parameters and Descriptions:
number cp1x: The x-coordinate of the first control point.
number cp1y: The y-coordinate of the first control point.
number cp2x: The x-coordinate of the second control point.
number cp2y: The y-coordinate of the second control point.
number x: The x-coordinate of the endpoint.
number y: The y-coordinate of the endpoint.
closePath
The method is utilized as Path2D.closePath().
Function Description: Closes the path to the starting point.
ellipse
The method is utilized as Path2D.ellipse(number x, number y, number radiusX, number radiusY, number rotation, number startAngle, number endAngle, boolean counterclockwise).
Function Description: Adds an elliptical arc path.
Parameters and Descriptions:
number x: The x-coordinate of the ellipse's center.
number y: The y-coordinate of the ellipse's center.
number radiusX: The semi-major axis of the ellipse, must be a non-negative number.
number radiusY: The semi-minor axis of the ellipse, must be a non-negative number.
number rotation: The rotation angle of the ellipse.
number startAngle: The starting angle of the arc.
number endAngle: The terminating angle of the arc.
boolean counterclockwise: Determines if the drawing is in a counterclockwise direction. If set to true, the drawing will commence from the endAngle and proceed to the startAngle.
lineTo
The method is utilized as follows: Path2D.lineTo(number x, number y)
Function Description: Addition of a linear path.
Parameters and Descriptions:
number x: The x-coordinate of the endpoint.
number y: The y-coordinate of the endpoint.
moveTo
The method is utilized as follows: Path2D.moveTo(number x, number y)
Function Description: Movement of the path's starting point.
Parameters and Descriptions:
number x: The horizontal coordinate.
number y: The vertical coordinate.
quadraticCurveTo
The method is employed as follows: Path2D.quadraticCurveTo(number cpx, number cpy, number x, number y)
Function Description: Addition of a quadratic Bézier curve path.
Parameters and Descriptions:
number cpx: The horizontal coordinate of the control point.
number cpy: The vertical coordinate of the control point.
number x: The x-coordinate of the endpoint.
number y: The y-coordinate of the endpoint.
rect
The method is utilized as follows: Path2D.rect(number x, number y, number width, number height)
Function Description: Addition of a rectangular path.
Parameters and Descriptions:
number x: The horizontal coordinate of the starting point.
number y: The vertical coordinate of the starting point.
number width: The width of the rectangle, positive values extend to the right, negative values to the left.
number height: The height of the rectangle, positive values extend downwards, negative values upwards.
Yes
No
Was this page helpful?