Metoda arc

Metoda arc vizaton një hark me qendër në një pikë të caktuar, me një rreze të caktuar. Kjo hark do të bëhet i dukshëm vetëm nëse përdoren metodat stroke ose fill. Në rastin e parë do të jetë një kontur, ndërsa në të dytin - një formë.

Parametri i fundit opsional rregullon drejtimin e vizatimit. Ai pranon vlerën true ose false. Vlera true vizon harkun në drejtim të akrepave të orës, ndërsa vlera false - në drejtim të kundërt të akrepave të orës (si parazgjedhje).

Mund të përcaktohen këndet fillestare dhe përfundimtare gjatë vizatimit. Këto kënde maten në radianë, jo në shkallë. Për të kthyer shkallët në radianë mund të përdorni funksionin e mëposhtëm:

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

Sintaksa

konteksti.arc(x, y, rrezja, këndi fillestar, këndi përfundimtar, [drejtimi = false]);

Shembull

Le të vizatojmë një rreth:

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

Shembull

Le të vizatojmë gjysmën e një rrethi:

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

Shembull

Le të vizatojmë gjysmën e një rrethi (do ta mbushim konturin duke përdorur 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;
}

Shihni gjithashtu

metoda rect,
e cila vizaton një drejtkëndësh