Phương thức Canvas quadraticCurveTo()

Tài liệu tham khảo Canvas

Đị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 điểm điều khiển của đường cong Bezier hai điểm.

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 trong tính toán Bezier hai điểm, đ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 để định nghĩa điểm bắt đầu.

Đường cong Bezier hai lần
  • Đ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 ý:Xem thêm Phương thức bezierCurveTo()Nó có hai điểm điều khiển, không phải một điểm.

Mô hình

Vẽ một đường cong Bezier hai điểm:

Trình duyệt của bạn không hỗ trợ thẻ canvas HTML5.

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();

Thử ngay

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 điều khiển Bezier.
cpy Tọa độ y của điểm điều khiển 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ú:Internet Explorer 8 và các phiên bản trước không hỗ trợ phần tử <canvas>.

Tài liệu tham khảo Canvas