Cách vẽ hình tròn với arc() trong HTML5

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

Tham số của arc()

STT	Tham số	Mô tả
1	x	Tọa độ x của tâm
2	y	Tọa độ y của tâm
3	r	Bán kính hình tròn
4	startingAngle	Góc bắt đầu (radian)
5	endingAngle	Góc kết thúc (radian)
6	counterclockwise	true: vẽ ngược chiều kim đồng hồ; false: chiều kim đồng hồ

Ví dụ

Bạn có thể chạy mã sau để vẽ hình tròn với 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>