Arc методу

arc методу белгиленген чекитте борборлошкон, белгиленген радиусу бар доо сызат. Бул доо көрүнөт эле, эгерде гана stroke же fill методдорун колдонсоңуз. Биринчи учурда сызык, экинчи учурда - форма болот.

Акыркы милдеттүү эмес параметр сызоо багытын жөндөйт. Ал true же false маанисин кабыл алат. true мааниси саат жебеси боюнча доону сызат, false мааниси болсо саат жебесине каршы (демейки).

Сызоо учурунда баштапкы жана аяктоо бурчтарын белгилөөгө болот. Бул бурчтар радиандарда өлчөнөт, градустарда эмес. Градустарды радиандарга которуу үчүн төмөнкү функцияны колдонсоңуз болот:

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

Синтаксис

контекст.arc(x, y, радиус, баштапкы бурч, аяктоо бурчу, [багыт = false]);

Мисал

Келгиле, тегерек сызалы:

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

Мисал

Келгиле, тегеректин жарымын сызалы:

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

Мисал

Келгиле, тегеректин жарымын сызалы (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;
}

Дагы караңыз

rect методу,
тик бурчтук сызган