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:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Hãy vẽ một hình tròn
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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
:
