Kaedah arc

Kaedah arc melukis lengkok dengan pusat pada titik yang ditentukan, jejari yang ditentukan. Lengkok ini akan kelihatan hanya jika kaedah stroke atau fill diterapkan. Dalam kes pertama akan terdapat kontur, dan dalam kes kedua - bentuk.

Parameter pilihan terakhir mengawal arah lukisan. Ia menerima nilai true atau false. Nilai true melukis lengkok mengikut arah jam, dan nilai false - lawan arah jam (secara lalai).

Anda boleh menetapkan sudut permulaan dan penamatan semasa melukis. Sudut ini diukur dalam radian, bukan dalam darjah. Untuk menukar darjah kepada radian anda boleh menggunakan fungsi berikut:

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

Sintaks

javascriptkonteks.arc(x, y, jejari, sudut permulaan, sudut penamatan, [arah = false]);

Contoh

Mari lukis bulatan:

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

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

Результат:

Contoh

Mari lukis separuh bulatan:

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

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

Результат:

Contoh

Mari lukis separuh bulatan (isi kontur dengan fill):

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

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

Результат:

Lihat juga