Path2D
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2016.
Note: This feature is available in Web Workers.
Path2D là giao diện của Canvas 2D API dùng để khai báo một đường dẫn, sau đó có thể được sử dụng trên đối tượng CanvasRenderingContext2D. Các phương thức đường dẫn của giao diện CanvasRenderingContext2D cũng có sẵn trên giao diện này, giúp bạn thuận tiện giữ lại và phát lại đường dẫn bất cứ khi nào cần.
Bộ khởi tạo
Path2D()-
Bộ khởi tạo của
Path2D. Tạo một đối tượngPath2Dmới.
Phương thức thể hiện
Path2D.addPath()-
Thêm một đường dẫn vào đường dẫn hiện tại.
Path2D.closePath()-
Làm cho điểm bút quay lại điểm bắt đầu của đường dẫn con hiện tại. Phương thức này cố gắng vẽ một đường thẳng từ điểm hiện tại đến điểm bắt đầu. Nếu hình đã được đóng hoặc chỉ có một điểm, hàm này không làm gì cả.
Path2D.moveTo()-
Di chuyển điểm bắt đầu của một đường dẫn con mới đến tọa độ (
x, y). Path2D.lineTo()-
Nối điểm cuối cùng trong đường dẫn con với tọa độ (
x, y) bằng một đường thẳng. Path2D.bezierCurveTo()-
Thêm một đường cong Bézier bậc ba vào đường dẫn. Nó cần ba điểm. Hai điểm đầu là điểm điều khiển và điểm thứ ba là điểm kết thúc. Điểm bắt đầu là điểm cuối cùng trong đường dẫn hiện tại, và có thể thay đổi bằng
moveTo()trước khi tạo đường cong Bézier. Path2D.quadraticCurveTo()-
Thêm một đường cong Bézier bậc hai vào đường dẫn hiện tại.
Path2D.arc()-
Thêm một cung tròn vào đường dẫn, được đặt tâm tại vị trí (
x, y) với bán kínhr, bắt đầu tạistartAnglevà kết thúc tạiendAngle, đi theo chiều được xác định bởicounterclockwise(mặc định là theo chiều kim đồng hồ). Path2D.arcTo()-
Thêm một cung tròn vào đường dẫn với các điểm điều khiển và bán kính được cho, nối với điểm trước đó bằng một đoạn thẳng.
Path2D.ellipse()-
Thêm một cung ellipse vào đường dẫn, được đặt tâm tại vị trí (
x, y) với các bán kínhradiusXvàradiusY, bắt đầu tạistartAnglevà kết thúc tạiendAngle, đi theo chiều được xác định bởicounterclockwise(mặc định là theo chiều kim đồng hồ). Path2D.rect()-
Tạo một đường dẫn hình chữ nhật tại vị trí (
x, y) với kích thước được xác định bởiwidthvàheight. Path2D.roundRect()-
Tạo một đường dẫn hình chữ nhật bo góc tại vị trí (
x, y) với kích thước được xác định bởiwidthvàheight, trong đó bán kính của cung tròn dùng cho các góc chữ nhật được xác định bởiradii.
Thông số kỹ thuật
| Specification |
|---|
| HTML> # path2d-objects> |