Melukis Bulatan melalui canvas pada JavaScript

Kaedah seterusnya arc melukis lengkok dengan titik pusat pada suatu titik. Ia menerima parameter berikut: x, y, jejari r, sudut permulaan startAngle, sudut penghujung endAngle, lukis mengikut atau lawan arah jam direction.

Parameter direction menerima nilai berikut: true menyebabkan lukisan mengikut arah jam, false lawan arah jam (secara lalai).

Sudut dalam kaedah arc diukur dalam radian, bukan dalam darjah. Untuk menukar darjah kepada radian anda boleh menggunakan fungsi berikut:

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

Mari lukis bulatan

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();

Результат:

Mari lukis separuh bulatan

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();

Результат:

Mari lukis separuh bulatan padat

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(); // isi kontur

Результат:

Masalah praktikal