Methode arc

Die Methode arc zeichnet einen Bogen mit einem Mittelpunkt an einem gegebenen Punkt und einem gegebenen Radius. Sichtbar wird dieser Bogen erst, wenn man die Methoden stroke oder fill anwendet. Im ersten Fall entsteht eine Kontur, im zweiten - eine ausgefüllte Form.

Der letzte optionale Parameter regelt die Richtung der Zeichnung. Er akzeptiert die Werte true oder false. Der Wert true zeichnet den Bogen im Uhrzeigersinn, und der Wert false - gegen den Uhrzeigersinn (Standard).

Man kann Start- und Endwinkel für die Zeichnung festlegen. Diese Winkel werden 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;
}

Syntax

javascriptKontext.arc(x, y, Radius, Startwinkel, Endwinkel, [Richtung = false]);

Beispiel

Lassen Sie uns einen Kreisbogen zeichnen:

html<canvas id="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();

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

Результат:

Beispiel

Lassen Sie uns einen halben Kreisbogen zeichnen:

html<canvas id="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();

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

Результат:

Beispiel

Lassen Sie uns einen Halbkreis zeichnen (füllen Sie die Kontur mit fill):

html<canvas id="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();

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

Результат:

Siehe auch