Apļu zīmēšana izmantojot canvas uz JavaScript

Nākamā metode arc zīmē loku ar centru noteiktā punktā. Tā pieņem šādus parametrus: x, y, rādiuss r, sākuma leņķis startAngle, beigu leņķis endAngle, zīmēt pa vai pret pulksteņa rādītāja virzienu direction.

Parametrs direction pieņem šādas vērtības: true liek zīmēt pa pulksteņa rādītāja virzienu, false pret pulksteņa rādītāja virzienu (pēc noklusējuma).

Šajā gadījumā leņķi metodē arc mēra radiānos, ne grādos. Lai pārvērstu grādus radiānos varat izmantot šādu funkciju:

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

Uzzīmēsim apli

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

Результат:

Uzzīmēsim pusi apļa

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

Результат:

Uzzīmēsim pusi riņķa

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(); // aizpildīsim kontūru

Результат:

Praktiskie uzdevumi