<canvas> Path (streger) - JavaScript

Tegn streger på <canvas> med JavaScript moveTo(), lineTo(), stroke() og fill()

Introduktion

beginPath() begynder en en ny path. En path kan består af mange streger.

moveTo(x, y) angiver at markøren skal flyttes til et nyt punkt uden at der skal tegnes.

lineTo(x, y) angiver at der skal tegnes en streg fra det sidste punkt til det nye punkt.

closePath() lukker start og slut punkterne så figuren start og slut punkt samles.

Stregerne tegnes først når stroke() eller fill() kaldes.

lineTo 1

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

lineTo 2

Her tegnes nogle figurer for at vise betydninger af closePath() som samler start og slutpunkterne på figuren.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

lineTo 3

Her ses hvordan man kan bestemme udseendet på stregernes ender og knæk.

lineCap bestemmer udseendet på linjens ender. Værdien kan være butt, round, square (butt er standard).

lineJoin bestemmer udseendet på linjens knæk. Værdien kan være miter, round, bevel (miter er standard).

miterLimit påvirker om linjen skal tegnes spidst der hvor linjen knækker (10 er standard) (bruges kun når lineJoin er sat til miter).

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

Når lineCap er sat til round eller square så øges stregens længde med lige så meget som stregens bredde (værdien af lineWidth).

Altså hvis linjen tegnes 100 pixels lang og 10 pixels bred så øges længden med 5 px i hver ende så linjen bliver 110 pixels lang.

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.