Phương thức HTML canvas quadraticCurveTo()
Định nghĩa và cách sử dụng
quadraticCurveTo() phương thức để thêm một điểm vào đường dẫn hiện tại bằng cách sử dụng điểm điều khiển biểu thị đường cong Bezier.
Lưu ý:Đường cong Bezier hai điểm cần hai điểm. Điểm đầu tiên là điểm điều khiển được sử dụng trong tính toán Bezier, đ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 đường dẫn không tồn tại, hãy sử dụng beginPath() và moveTo() phương thức để xác định điểm bắt đầu.
- Điểm bắt đầu: moveTo(
20,20) - Điểm điều khiển: quadraticCurveTo(
20,100,200,20) - Điểm kết thúc: quadraticCurveTo(20,100,
200,20)
Lưu ý:Xin xem Phương thức bezierCurveTo()。Nó có hai điểm điều khiển, không phải một điểm.
Mẫu
Vẽ một đường cong Bezier hai điểm:
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();
Cú pháp
context.quadraticCurveTo(cpx,cpy,x,y);
Giá trị tham số
| Tham số | Mô tả |
|---|---|
| cpx | Tọa độ x của điểm kiểm soát Bezier. |
| cpy | Tọa độ y của điểm kiểm soát Bezier. |
| x | Tọa độ x của điểm kết thúc. |
| y | Tọa độ y của điểm kết thúc. |
Hỗ trợ trình duyệt
Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Ghi chú:Trình duyệt Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ phần tử <canvas>.
