<canvas> Path (cirkler) - JavaScript

Tegn cirkler, halv cirkler og kage-diagrammer på <canvas> med JavaScript arc()

Introduktion

arc(x, y, radius, startvinkel, slutvinkel, omvendt) bruges til at tegne cirkler.

Cirklens vinkel starter til højre på cirklen (startvinkel = 0).
Hvis der skal tegnes en fuld cirkel så skal slutvinkel være det dobbelte af π (Math.PI * 2 ~ 6.283185307179586...) hvilket er det antal gange en cirkels omkreds er længere end cirklens radius (dobbelte af π).
Radius er fra midten af cirklen og ud til kanten.

Arc 1

Her ses hvordan man tegner en cirkel.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

Arc 2

Her er flere cirkler.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

Arc 3

Den 6.parameter i arc() fortæller om cirklen skal tegnes modsat urets retning.
Værdien kan være true eller false (false er standard).

Hvis den 6.parameter i arc() er false så tegnes der i urets retning.
Hvis den 6.parameter i arc() er true så tegnes der modsat urets retning.

Udgangspunket for cirklen er ude til højre i midten.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

Arc 4

Ved at lege med cirklernes start og slutvinkel kan man lave et kage-diagram.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode
Siden er sidst opdateret mandag 25. juni 2018