Vòng kết nối Canvas HTML
Phương thức arc()
Phương thức arc()
được sử dụng để xác định một đường tròn.
Phương thức arc()
có các tham số sau:
Parameter | Description |
---|---|
x | Required. The x-coordinate of the arc's center |
y | Required. The y-coordinate of the arc's center |
radius | Required. The radius of the arc |
startAngle | Required. The angle where the arc starts in radians |
endAngle | Required. The angle where the arc ends in radians |
counterclockwise | Optional. A boolean value. If set to true, it draws the arc counter-clockwise between the start and end angles. The default is false (clockwise) |
Vẽ một vòng tròn đầy đủ
Chúng ta có thể tạo một vòng tròn đầy đủ bằng phương thức arc()
bằng cách xác định startAngle là 0 và endAngle là 2 * PI:
Để vẽ một vòng tròn trên khung vẽ, hãy sử dụng các phương pháp sau:
-
beginPath()
- Bắt đầu một con đường -
arc()
- Xác định đường tròn -
stroke()
- Vẽ nó
Ví dụ
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
Hãy tự mình thử » Vẽ một vòng tròn đầy đủ bằng màu sắc
Thêm màu tô và màu nét vẽ vào hình tròn:
Ví dụ
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.fillStyle
= "red";
ctx.fill();
ctx.lineWidth = 4;
ctx.strokeStyle = "blue";
ctx.stroke();
</script>
Hãy tự mình thử »Vẽ một nửa vòng tròn
Ở đây chúng ta thay đổi endAngle thành PI (không phải 2 * PI):
Ví dụ
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, Math.PI);
ctx.fillStyle
= "red";
ctx.fill();
ctx.stroke();
</script>
Hãy tự mình thử »Thông tin thêm về các góc của một vòng cung
Hình ảnh sau đây cho thấy một số góc trong một vòng cung:
Tâm: cung( 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 cuối: cung(100, 75, 50, 0 * Math.PI, 1.5 * Math.PI )Ví dụ
Ở đây chúng ta muốn vẽ một cung từ góc đầu 0 đến góc cuối 0,5 * PI:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 0.5 * Math.PI);
ctx.stroke();
</script>
Hãy tự mình thử »Ví dụ
Ở đây chúng ta làm tương tự, nhưng với tham số ngược chiều kim đồng hồ được đặt thành true (sau đó nó vẽ cung ngược chiều kim đồng hồ giữa góc bắt đầu và góc kết thúc):
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 0.5 * Math.PI, true);
ctx.stroke();
</script>
Hãy tự mình thử »