Phương pháp Canvas arcTo()

Tài liệu tham khảo Canvas

Định nghĩa và cách sử dụng

arcTo() Phương pháp tạo đoạn đường tròn/đường cong giữa hai đường tiếp tuyến trên canvas.

Lưu ý:Hãy sử dụng stroke() Phương pháp vẽ đoạn đường tròn chính xác trên canvas.

Mẫu

Tạo một đoạn đường tròn giữa hai đường tiếp tuyến trên canvas:

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.beginPath();
ctx.moveTo(20,20);           // Tạo điểm bắt đầu
ctx.lineTo(100,20);          // Tạo đường thẳng ngang
ctx.arcTo(150,20,150,70,50); // Tạo đường tròn
ctx.lineTo(150,120);         // Tạo đường thẳng đứng
ctx.stroke();                // Thực hiện vẽ

Thử ngay

Ngữ pháp

context.fillRect(x1,y1,x2,y2,r);

Giá trị tham số

Tham số Mô tả
x1 Tọa độ x của điểm đầu của đường tròn
y1 Tọa độ y của điểm đầu của đường tròn
x2 Tọa độ x của điểm cuối của đường tròn
y2 Tọa độ y của điểm kết thúc của đường tròn
r Bán kính của đường tròn

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

Chú ý:Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ phần tử <canvas>.

Tài liệu tham khảo Canvas