Phương thức bezierCurveTo() trên canvas HTML
Định nghĩa và cách sử dụng
bezierCurveTo() 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 kiểm soát biểu thị đường cong Bezier ba điểm.
Lưu ý:Đường cong Bezier ba điểm cần ba điểm. Hai điểm đầu tiên là điểm kiểm soát trong tính toán Bezier ba điểm, điểm thứ ba 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 để định nghĩa điểm bắt đầu.
- Điểm bắt đầu: moveTo(
20,20) - Điểm kiểm soát 1: bezierCurveTo(
20,100,200,100,200,20) - Điểm kiểm soát 2: bezierCurveTo(20,100,
200,100,200,20) - Điểm kết thúc: bezierCurveTo(20,100,200,100,
200,20)
Lưu ý:Xin xem Phương thức quadraticCurveTo()Nó có một điểm kiểm soát,而不是 hai điểm.
Mô hình
Vẽ một đường cong Bezier ba điểm:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
Cú pháp
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
Giá trị tham số
| Tham số | Mô tả |
|---|---|
| cp1x | Tọa độ x của điểm kiểm soát Bezier thứ nhất. |
| cp1y | Tọa độ y của điểm kiểm soát Bezier thứ nhất. |
| cp2x | Tọa độ x của điểm kiểm soát Bezier thứ hai. |
| cp2y | Tọa độ y của điểm kiểm soát Bezier thứ hai. |
| 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ú:Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ phần tử <canvas>.
