Arc metodas

Metodas arc piešia lanką su centru nustatytame taške, nurodyto spindulio. Matomas šis lankas taps tik pritaikius metodus stroke arba fill. Pirmuoju atveju bus kontūras, o antruoju - figūra.

Paskutinis neprivalomas parametras reguliuoja piešimo kryptį. Jis priima reikšmę true arba false. Reikšmė true piešia lanką pagal laikrodžio rodyklę, o reikšmė false - prieš laikrodžio rodyklę (pagal nutylėjimą).

Galima nustatyti pradinį ir galinį kampus piešiant. Šie kampai matuojami radianais, ne laipsniais. Norėdami konvertuoti laipsnius į radianus galite naudoti šią funkciją:

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

Sintaksė

javascriptkontekstas.arc(x, y, spindulys, pradinis kampas, galinis kampas, [kryptis = false]);

Pavyzdys

Nupieškime apskritimą:

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;
}

Результат:

Pavyzdys

Nupieškime pusę apskritimo:

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;
}

Результат:

Pavyzdys

Nupieškime pusę rato (užpildykime kontūrą naudodami 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;
}

Результат:

Taip pat žiūrėkite