Zeichnen von Kreisen mit Canvas in JavaScript

Die folgende Methode arc zeichnet einen Bogen mit Mittelpunkt an einem Punkt. Sie akzeptiert die folgenden Parameter: x, y, Radius r, Startwinkel startAngle, Endwinkel endAngle, zeichnen im oder gegen den Uhrzeigersinn direction.

Der Parameter direction akzeptiert die folgenden Werte: true bewirkt Zeichnen im Uhrzeigersinn, false gegen den Uhrzeigersinn (Standard).

Dabei werden die Winkel in der Methode arc in Radiant gemessen, nicht in Grad. Um Grad in Radiant umzurechnen, können Sie die folgende Funktion verwenden:

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

Zeichnen wir einen Kreis

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

Результат:

Zeichnen wir einen Halbkreis

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

Результат:

Zeichnen wir einen Halbkreis (ausgefüllt)

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(); // fülle die Kontur

Результат:

Praktische Aufgaben