<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

Næste side

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.