JavaScript арқылы canvas көмегімен шеңберлер салу

Келесі әдіс arc орталығы белгілі бір нүктеде болатын доғаны салады. Ол келесі параметрлерді қабылдайды: x, y, радиус r, бастапқы бұрыш startAngle, соңғы бұрыш endAngle, сағат тілімен немесе сағат тіліне қарсы салу direction.

direction параметрі келесі мәндерді қабылдайды: true сағат тілімен бағытта, false сағат тіліне қарсы (әдепкі бойынша).

Бұл ретте arc әдісіндегі бұрыштар радианмен өлшенеді, градуспен емес. Градустарды радианға түрлендіру үшін сіз келесі функцияны пайдалана аласыз:

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

Шеңбер салайық

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

Результат:

Шеңбердің жартысын салайық

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

Результат:

Шеңбердің жарты бөлігін салайық

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(); // контурды бояйық

Результат:

Практикалық есептер