Phương thức HTML canvas quadraticCurveTo ()
Thí dụ
Vẽ đường cong Bézier bậc hai:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.stroke();
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phương pháp này.
| Method | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | Yes | 9.0 | Yes | Yes | Yes |
Định nghĩa và Cách sử dụng
Phương thức quadraticCurveTo () thêm một điểm vào đường dẫn hiện tại bằng cách sử dụng các điểm điều khiển được chỉ định đại diện cho đường cong Bézier bậc hai.
Một đường cong Bézier bậc hai yêu cầu hai điểm. Điểm đầu tiên là điểm kiểm soát được sử dụng trong phép tính Bézier bậc hai và điểm thứ hai là điểm kết thúc của đường cong. Điểm bắt đầu của đường cong là điểm cuối cùng trong đường dẫn hiện tại. Nếu một đường dẫn không tồn tại, hãy sử dụng phương thức beginPath () và moveTo () để xác định điểm bắt đầu.
Điểm bắt đầu:
moveTo ( 20,20 )
Điểm kiểm soát:
bậc haiCurveTo ( 20,100 , 200,20)
Điểm cuối:
bậc haiCurveTo (20,100, 200,20 )
Mẹo: Kiểm tra phương thức bezierCurveTo () . Nó có hai điểm kiểm soát thay vì một.
| Cú pháp JavaScript: | ngữ cảnh .quadraticCurveTo ( cpx, cpy, x, y ); |
|---|
Giá trị tham số
| Parameter | Description | Play it |
|---|---|---|
| cpx | The x-coordinate of the Bézier control point | |
| cpy | The y-coordinate of the Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |
❮ Tham chiếu HTML Canvas