Phương thức Canvas bezierCurveTo()
Định nghĩa và cách sử dụng
bezierCurveTo() phương thức để thêm một điểm vào con đường hiện tại bằng các đ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 phép tính 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 con đường hiện tại. Nếu con đường 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 ý:Xem thêm Phương thức quadraticCurveTo()Nó có một điểm kiểm soát, không phải 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ố
| 参數 | 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
Bảng số cho biết phiên bản trình duyệt đầu tiên hỗ trợ tính chất 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 trước không hỗ trợ phần tử <canvas>.
