Շրջանագծեր նկարելը canvas-ի միջոցով JavaScript-ում

Հաջորդ մեթոդը՝ arc, նկարում է աղեղ՝ կենտրոնով որոշակի կետում: Այն ընդունում է հետևյալ պարամետրերը՝ x, y, շառավիղ՝ r, սկզբնական անկյուն՝ startAngle, վերջնական անկյուն՝ endAngle, նկարել ժամսլաքի ուղղությամբ, թե՞ հակառակ ուղղությամբ՝ direction:

direction պարամետրը ընդունում է հետևյալ արժեքները. true՝ նկարել ժամսլաքի ուղղությամբ, false՝ ժամսլաքի հակառակ ուղղությամբ (լռելյայն):

Միևնույն ժամանակ, arc մեթոդում անկյունները չափվում են ռադիաններով, ոչ թե աստիճաններով: Աստիճանները ռադիանների վերածելու համար կարող եք օգտագործել հետևյալ ֆունկցիան.

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

Նկարենք շրջանագիծ

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

Նկարենք շրջանագծի կեսը

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

Նկարենք շրջանի կեսը

<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(); // լրացնենք կոնտուրը

Շրջանագծեր նկարելը canvas-ի միջոցով JavaScript-ում

Նկարենք շրջանագիծ

Նկարենք շրջանագծի կեսը

Նկարենք շրջանի կեսը

Գործնական առաջադրանքներ