Phương pháp Canvas arc()
Định nghĩa và cách sử dụng
arc() Phương pháp tạo đường tròn/đường cong (dùng để tạo hình tròn hoặc phần tròn).
Lưu ý:Nếu muốn tạo hình tròn bằng phương pháp arc(), hãy đặt góc bắt đầu thành 0và đặt góc kết thúc thành 2*Math.PI.
Lưu ý:Hãy sử dụng stroke() hoặc fill() Phương pháp vẽ đường tròn thực tế trên canvas.
- Trung tâm: arc(
100,75,50,0*Math.PI,1.5*Math.PI) - Góc bắt đầu: arc(100,75,50,
0,1.5*Math.PI) - Góc kết thúc: arc(100,75,50,0*Math.PI,
1.5*Math.PI)
Mô hình
Tạo một hình tròn:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
Cú pháp
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
Giá trị tham số
| Tham số | Mô tả |
|---|---|
| x | Tọa độ x của tâm hình tròn. |
| y | Tọa độ y của tâm hình tròn. |
| r | Bán kính của hình tròn. |
| sAngle | Góc bắt đầu, tính bằng radian. (Vị trí 3 giờ của vòng tròn là 0 độ). |
| eAngle | Góc kết thúc, tính bằng radian. |
| counterclockwise | Chọn. Quy định nên vẽ theo chiều kim đồng hồ hay ngược chiều kim đồng hồ. False = theo chiều kim đồng hồ, true = ngược chiều kim đồng hồ. |
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ú:Trình duyệt Internet Explorer 8 và các phiên bản trước không hỗ trợ phần tử <canvas>.
