Phương thức arc

Phương thức arc vẽ một cung với tâm tại điểm cho trước, bán kính cho trước. Cung này sẽ hiển thị chỉ khi áp dụng các phương thức stroke hoặc fill. Trong trường hợp thứ nhất sẽ là đường viền, còn trong trường hợp thứ hai - là hình được tô đầy.

Tham số tùy chọn cuối cùng điều chỉnh hướng vẽ. Nó nhận giá trị true hoặc false. Giá trị true vẽ cung theo chiều kim đồng hồ, còn giá trị false - ngược chiều kim đồng hồ (mặc định).

Có thể chỉ định góc bắt đầu và góc kết thúc khi vẽ. Các góc này đượ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;
}

Cú pháp

ngữ cảnh.arc(x, y, bán kính, góc bắt đầu, góc kết thúc, [hướng = false]);

Ví dụ

Hãy vẽ một đường tròn:

<canvas id="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();

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

Ví dụ

Hãy vẽ nửa đường tròn:

<canvas id="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();

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

Ví dụ

Hãy vẽ nửa hình tròn (tô đầy đường viền bằng fill):

<canvas id="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();

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

Xem thêm

phương thức rect,
vẽ hình chữ nhật