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:

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

Syntax

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

Beispiel

Lassen Sie uns einen Kreisbogen zeichnen:

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

Beispiel

Lassen Sie uns einen halben Kreisbogen zeichnen:

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

Beispiel

Lassen Sie uns einen Halbkreis zeichnen (füllen Sie die Kontur mit 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;
}

Siehe auch

die Methode rect,
die ein Rechteck zeichnet