Phương thức canvas bezierCurveTo()
Ví dụ
Vẽ đường cong Bézier bậc ba:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();
Hãy tự mình thử »Sự miêu tả
Phương thức bezierCurveTo()
thêm một đường cong vào đường dẫn bằng cách sử dụng các điểm điều khiển đại diện cho đường cong Bézier bậc ba.
Sử dụng phương thức stroke()
hoặc fill()
để vẽ đường dẫn.
Đường cong bezier bậc ba cần có 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 bậc ba và điểm cuối cùng 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 trên đường dẫn hiện tại. Nếu đường dẫn không tồn tại, hãy sử dụng các 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 điều khiển 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 )Ghi chú
Phương thức bậc haiCurveTo() có một điểm kiểm soát thay vì hai.
Xem thêm:
Phương thức BeginPath() (Bắt đầu một đường dẫn mới)
Phương thức closePath() (Đóng đường dẫn hiện tại)
Phương thức moveTo() (Di chuyển đường dẫn tới một điểm)
Phương thức lineTo() (Thêm một dòng vào đường dẫn)
Phương thức fill() (Điền đường dẫn hiện tại)
Phương thức Stroke() (Vẽ đường dẫn hiện tại)
Phương thức arc() (Thêm một vòng tròn vào đường dẫn)
Phương thức arcTo() (Thêm một vòng tròn vào đường dẫn)
Phương thức quadraticCurveTo() (Thêm đường cong vào đường dẫn)
Cú pháp
bối cảnh .bezierCurveTo( cp1x, cp1y, cp2x, cp2y, x, y ) |
Giá trị tham số
Param | Description | Play it |
---|---|---|
cp1x | The x-coordinate of the first Bézier control point | Play it » |
cp1y | The y-coordinate of the first Bézier control point | Play it » |
cp2x | The x-coordinate of the second Bézier control point | Play it » |
cp2y | The y-coordinate of the second Bézier control point | Play it » |
x | The x-coordinate of the ending point | Play it » |
y | The y-coordinate of the ending point | Play it » |
Giá trị trả về
KHÔNG CÓ |
Hỗ trợ trình duyệt
Phần tử <canvas>
là tiêu chuẩn HTML5 (2014).
bezierCurveTo()
được hỗ trợ trong tất cả các trình duyệt hiện đại:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 9-11 |