Tegn 2 cirkler på canvas

Tags:    html5 javascript

Hvis jeg tegner 2 cirkler på et <canvas> med arc() lidt ved siden af hinanden så kommer der en streg imellem dem.

Nogen der ved hvordan man gør det på den rigtige måde så der ikke kommer denne streng i mellem de 2 cirkler ?

Kan ses her : [jeg har fjernet linket da det ikke findes mere]

Man kan vist godt bruge moveTo() til at flytte "blyanten" inden den anden cirkel tegnes men regner ikke med det er den rigtige måde at gøre det på.

Har ikke helt check på om jeg bruger beginPath() rigtigt.



Indlæg senest redigeret d. 12.10.2012 03:33 af Bruger #13010
5 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma
Sorter efter stemmer Sorter efter dato
Nu er jeg ikke ekspert i det, men jeg vil umidelbart mene at det skyldes at du ikke "løfter kuglepenne" efter du tegner.

Hvis du forstiller dig at du når du siger beginPath(), at du så sætter kuglepennen på papiret. Når du tegner så vil den ikke løfte den igen før den er færdig. Derfor når du tegner en cirkel på et nyt koordinat kommer der en streg til den. Hvis du ser på de 2 cirkler, kan du også se at den udgangspunkt på de 2 cirkler er ens.



Ja det er det med at "løfte blyanten" men det bare hvordan man gør det på den rigtige måde.

Det virker hvis jeg bruger beginPath() før hver eneste arc() og fill() eller stroke() efter hver arc().
Fold kodeboks ind/udJScript kode 


Tænker bare det ville være bedre hvis man kunne nøjes med sådan her.
Fold kodeboks ind/udJScript kode 





Indlæg senest redigeret d. 27.10.2011 20:05 af Bruger #13010
beginPath() sætter blyanten på papiret. endPath() løfter blyanten. Alt derimellem tegner på papiret.

Hvis du i den virkelige verden skulle tegne to circler ville du også sætte blyanten på papiret to gange.



Du mener vel closePath() og ikke endPath().

Det ser ikke ud til at være nødvendigt at bruge closePath() efter hver arc().

Jeg skal alligevel kalde stroke() eller fill() efter hver arc() ellers kommer de streger.

Man kunne tro at man kan gøre sådan her men det giver stadig en streg i mellem de 2 cirkler.
Fold kodeboks ind/udJScript kode 

Man skal åbenbart kalde fill() eller stroke() efter hver arc().

De eksemplet jeg kan fide på nettet tegner ofte gerne kun 1 cirkel eller også er der en loop.



Indlæg senest redigeret d. 27.10.2011 20:06 af Bruger #13010
Ja, mente closePath() :-)

Og ja, fill() og stroke() hører til mellem beginPath() og closePath().

Se det som at hver polygon har en start og en slutning...og en omkrandset streg og udfyldning.



t