Phương thức HTML canvas bezierCurveTo ()
Thí dụ
Vẽ một đường cong Bézier lập phương:
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();
Hỗ trợ trình duyệt
Internet Explorer 9, Firefox, Opera, Chrome và Safari hỗ trợ phương thức bezierCurveTo ().
Định nghĩa và Cách sử dụng
Phương thức bezierCurveTo () 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 biểu thị một đường cong Bézier khối.
Một đường cong bezier hình khối yêu cầu ba điểm. Hai điểm đầu tiên là điểm kiểm soát được sử dụng trong phép tính Bézier lập phương và điểm cuối cùng là điểm kết thúc cho đườ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 xuất phát
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 cuối
bezierCurveTo (20,100,200,100, 200,20 )
Mẹo: Kiểm tra phương thức quadraticCurveTo () . Nó có một điểm kiểm soát thay vì hai.
| Cú pháp JavaScript: | ngữ cảnh .bezierCurveTo ( cp1x, cp1y, cp2x, cp2y, x, y ); |
|---|
Giá trị tham số
| Parameter | Description | Play it |
|---|---|---|
| cp1x | The x-coordinate of the first Bézier control point | |
| cp1y | The y-coordinate of the first Bézier control point | |
| cp2x | The x-coordinate of the second Bézier control point | |
| cp2y | The y-coordinate of the second 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