Vẽ hình tròn qua canvas trên JavaScript

Phương thức tiếp theo arc vẽ một cung tròn có tâm tại một điểm nào đó. Nó nhận các tham số sau: x, y, bán kính r, góc bắt đầu startAngle, góc kết thúc endAngle, vẽ theo chiều hay ngược chiều kim đồng hồ direction.

Tham số direction nhận các giá trị sau: true buộc vẽ theo chiều kim đồng hồ, false ngược chiều kim đồng hồ (mặc định).

Các góc trong phương thức arc được đo bằng radian, không phải độ. Để chuyển đổi độ sang radian bạn có thể sử dụng hàm sau:

javascriptfunction getRadians(degrees) {
  return (Math.PI / 180) * degrees;
}

Hãy vẽ một hình tròn

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();

Результат:

Hãy vẽ một nửa hình tròn

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.stroke();

Результат:

Hãy vẽ một nửa hình tròn đặc

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill(); // tô màu đường viền

Результат:

Bài tập thực hành