წრეწირების ხატვა canvas-ის მეშვეობით JavaScript-ში

შემდეგი მეთოდი 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(); // გავაფერადოთ კონტური

Результат:

პრაქტიკული ამოცანები