Computer >> Máy Tính >  >> Lập trình >> HTML

Làm thế nào để vẽ một vòng tròn với arc () trong HTML5?


Phương thức arc () được sử dụng để tạo một vòng kết nối trong HTML5 với phần tử canvas. Đối với đường tròn có phương thức arc (), sử dụng góc bắt đầu là 0 và góc kết thúc là 2 * Math.PI.

Đây là các giá trị tham số của phương thức arc () -

S. Không
Tham số
Mô tả
1
x
tọa độ x
2
y
tọa độ y
3
r
Bán kính của hình tròn
4
startedAngle
Góc bắt đầu tính bằng radian
5
endAngle
Góc kết thúc tính bằng radian
6
ngược chiều kim đồng hồ (Đúng / Sai)
Để vẽ ngược chiều kim đồng hồ, chọn True, else, false


Làm thế nào để vẽ một vòng tròn với arc () trong HTML5?

Ví dụ

Bạn có thể thử chạy đoạn mã sau để vẽ một đường tròn bằng phương thức arc () trong HTML5 -

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Canvas</title>
   <head>
   <body>
      <canvas id="newCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas>
      <script>
         var c = document.getElementById("newCanvas");
         var ctxt = c.getContext("2d");
         ctxt.beginPath();
         ctxt.arc(100,75,50,0,2*Math.PI);
         ctxt.stroke();
      </script>
   </body>
</html>