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:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Zeichnen wir einen Kreis
<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();
:
Zeichnen wir einen Halbkreis
<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();
:
Zeichnen wir einen Halbkreis (ausgefüllt)
<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(); // fülle die Kontur
:
