Phương pháp HTML canvas arcTo()
Định nghĩa và cách sử dụng
arcTo() Phương pháp tạo đoạn tròn/đường cong giữa hai đường thẳng trên canvas.
Lưu ý:Vui lòng sử dụng stroke() Phương pháp vẽ đoạn tròn chính xác trên canvas.
Mẫu
Tạo một đoạn tròn giữa hai đường thẳng chéo trên canvas:
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 hình tròn
ctx.lineTo(150,120); // Tạo đường thẳng đứng
ctx.stroke(); // Thực hiện vẽ
Cú 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 bắt đầu của hình tròn |
| y1 | Tọa độ y của điểm bắt đầu của hình tròn |
| x2 | Tọa độ x của điểm cuối của hình tròn |
| y2 | Tọa độ y của điểm cuối của hình tròn |
| r | Bán kính của hình 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 |
Ghi chú：Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ phần tử <canvas>.
