Kontakta författare

I HTML5 kan vi rita de vackraste formerna genom att inkludera cirklar och bågar i våra ritningar. I denna HTML5-tutorial visar jag dig hur du ritar en cirkel eller en båge på en HTML5-duk. Du kommer att se att de tekniskt sett inte skiljer sig från varandra. Denna handledning har många exempel eftersom det inte alltid är enkelt hur man ritar cirklar och bågar som du vill ha det.

Se till att du läser min självstudie om grunderna i att rita på duken innan du fortsätter med den här tutorialen. Detta förklarar vad ett ritningskontekst är och hur man använder det.

Grundläggande HTML5-webbsida

Vi börjar denna tutorial med en grundläggande tom HTML5-webbsida. Vi har också lagt till en kod för att se ritningskonteksten som vi behöver rita senare. Du kommer inte att se någonting när du tittar på denna webbsida i en webbläsare. Det är dock en giltig HTML5-webbsida och vi kommer att utvidga den i resten av denna handledning.

 HTML5 Tutorial: Rita cirklar och bågar var canvas = document.getElementById ('mycanvas'); var ctx = canvas.getContext ('2d'); 

Bågmetoden i ritningssammanhanget

I koden ovan har vi skapat en ritningssammanhang ctx . Både ritning av en cirkel och ritning av en båge görs med samma metodbåge i ritningssammanhanget ctx . Detta kan göras genom att ringa båge (x, y, radie, startAngle, endAngle, moturs medurs ) med värden fyllda för vart och ett av dessa argument.

Argumenten x och y är ljusbågens x-koordinat och y-koordinat. Detta är mitten av bågen eller cirkeln som du ritar.
Radiusargumentet är radien för cirkeln längs vilken bågen dras.
StartAngle- och endAngle- argumenten är vinklarna där bågen börjar och slutar i radianer.
Argumentet moturs är ett booleskt värde som anger om du drar moturs eller inte. Som standard dras bågar medsols men om du har sant som argument här kommer bågen att dras moturs. Vi kommer att använda värdet falskt när vi drar medurs.

De viktigaste sakerna du behöver veta om start- och slutvinklarna är följande:

  1. Värdena för dessa vinklar går från 0 till 2 * Math.PI.
  2. En startvinkel på 0 betyder att börja rita från klockan 3 på en klocka.
  3. En slutvinkel på 2 * Math.PI betyder att rita fram till klockan 3 på en klocka.
  4. Alla start- och slutvinklar däremellan mäts genom att gå medurs från början mot slutet (så från klockan 3 till klockan 4 hela vägen tillbaka till klockan 3 igen). Om du har ställt moturs medurs till sant går detta moturs.

Detta innebär att om du vill rita en cirkel måste du börja vid 0 och avsluta vid 2 * Math.PI eftersom du vill starta din båge vid 3-tiden och du vill dra bågen hela vägen tillbaka till klockan 3 (2 * Math.PI). Detta gör en full cirkel. Om du vill rita någon båge som inte är en full cirkel måste du själv välja start- och slutvinklar.

Observera särskilt att du inte anger längden på bågen utan bara start- och slutvinklarna i ett fördefinierat system (med 0 vid klockan 3 i en cirkel).

Degreesradianer
00
900, 5 * Math.PI
180Math.PI
2701.5 * Math.PI
3602 * Math.PI

Hur mäts start- och slutvinkeln på en båge?

Start- och slutvinkeln för bågmetoden mäts i radianer. Låt mig snabbt förklara vad det betyder: en hel cirkel har 360 grader vilket är samma som 2 gånger den matematiska konstanten pi. I JavaScript uttrycks den matematiska konstanten pi som Math.PI och jag kommer att hänvisa till pi som det i resten av denna tutorial.

I tabellen till höger ser du de vanligaste start- och slutvinklarna för dina cirklar och bågar. Titta på denna tabell när du är förvirrad över vad du exakt tecknar och vad vinklarna måste vara.

Du bör använda den här tabellen om du behöver konvertera grader till radianer för att rita din båge.

Hur använder du den här tabellen?

Medvetet om att bågen dras från klockan 3, avgör hur långt borta i grader bågen kommer att starta eller stoppa och leta efter startvinkeln i radianer. Om du till exempel börjar rita vid 6-tiden är det 90 grader från startpunkten och därför är startvinkeln 0, 5 * Math.PI.

På samma sätt, om du slutar rita bågen vid klockan 12, måste du använda 1, 5 * Math.PI eftersom vi nu är 270 grader från startpunkten.

Hur man ritar en båge eller cirkel i HTML5

I avsnitten ovan förklarade jag värdena som du behöver för att ange en båge, till exempel dess placering och vad vinklarna är. Jag ska nu förklara hur man faktiskt ritar bågen så att den blir synlig på din duk.

Som diskuterats i en tidigare handledning kan du antingen sträcka eller fylla din båge på duken. Här är ett exempel på hur en ritning en cirkel kan se ut:

 ctx.beginPath (); ctx.arc (100, 100, 50, 0, 2 * Math.PI, falsk); ctx.fillStyle = "rgb (0, 0, 255)"; ctx.fill (); 

Exempel på ritning av en cirkel i HTML5

Som förklarats ovan behöver vi en startvinkel på 0 och en slutvinkel på 2 * Math.PI. Vi kan inte variera dessa värden så de enda argument som kan variera är koordinaterna, radien och huruvida cirkeln dras moturs eller inte.

Vi pratar om en cirkel här så det sista argumentet spelar ingen roll (det kan vara antingen falskt eller sant ) eftersom du måste rita hela bågen (cirkeln) ändå. De enda argument som är viktiga är därför koordinaterna och radien.

Här är några exempel på ritning av en cirkel i HTML5:

En röd cirkel centrerad vid koordinaten (100, 100) med en radie av 50.

 ctx.beginPath (); ctx.arc (100, 100, 50, 0, 2 * Math.PI, falsk); ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fill (); 

En blå cirkel med en svart kant centrerad vid (80, 60) med en radie av 40.

 ctx.beginPath (); ctx.arc (80, 60, 40, 0, 2 * Math.PI, falsk); ctx.fillStyle = "rgb (0, 0, 255)"; ctx.fill (); ctx.strokeStyle = "svart"; ctx.stroke (); 

Exempel på ritning av en båge i HTML5

Vi kan nu välja bågarnas start- och slutvinklar. Kom ihåg att titta på tabellen ovan med grader och radianer om du är förvirrad. För enkelhets skull kommer alla följande exempel att ha en båge som är centrerad vid (100, 100) och en radie på 50 eftersom dessa värden inte riktigt spelar någon roll för att förstå hur man bågar.

Här är några exempel på ritning av en båge i HTML5:

En båge medurs med början från klockan 3 (0) till klockan 12 (1, 5 * Math.PI). Detta är en båge på 270 grader.

 ctx.beginPath (); ctx.arc (100, 100, 50, 0, 1, 5 * Math.PI, falsk); ctx.lineWidth = 10; ctx.stroke (); 

En båge medurs med början från klockan 3 (0) till klockan 9 (Math.PI). Detta är en båge på 180 grader och den nedre halvan av en cirkel.

 ctx.beginPath (); ctx.arc (100, 100, 50, 0, Math.PI, falsk); ctx.lineWidth = 10; ctx.stroke (); 

En burs medurs från klockan 9 (Math.PI) till klockan 3 (2 * Math.PI). Detta är en båge på 180 grader och den övre halvan av en cirkel.

 ctx.beginPath (); ctx.arc (100, 100, 50, Math.PI, 2 * Math.PI, falsk); ctx.lineWidth = 10; ctx.stroke (); 

En båge medurs från startvinkeln 1, 25 * Math.PI till slutvinkel 1, 75 * Math.PI. Detta är en båge på 90 grader.

 ctx.beginPath (); ctx.arc (100, 100, 50, 1, 25 * Math.PI, 1, 75 * Math.PI, falsk); ctx.lineWidth = 10; ctx.stroke (); 

Tänk om startvinkeln är högre än slutvinkeln?

Inga bekymmer, det kommer fortfarande att dra en båge. Titta på detta exempel:

 ctx.beginPath (); ctx.arc (100, 100, 50, 1, 5 * Math.PI, 0, 5 * Math.PI, falsk); ctx.lineWidth = 10; ctx.stroke (); 

Kan du ta reda på varför det fortfarande fungerar?

Exempel på cirklar och bågar: Pac-man i HTML5

Som ett sista exempel på ritning av cirklar och bågar i HTML5, titta på följande exempel på Pac-man i HTML5!

 ctx.beginPath (); ctx.arc (100, 100, 50, 0, 25 * Math.PI, 1, 25 * Math.PI, falsk); ctx.fillStyle = "rgb (255, 255, 0)"; ctx.fill (); ctx.beginPath (); ctx.arc (100, 100, 50, 0, 75 * Math.PI, 1, 75 * Math.PI, falsk); ctx.fill (); ctx.beginPath (); ctx.arc (100, 75, 10, 0, 2 * Math.PI, falsk); ctx.fillStyle = "rgb (0, 0, 0)"; ctx.fill (); 

En annan bra HTML5-tutorial!

  • HTML5 Tutorial: Textritning med utsmyckade färger och effekter
    Du kan göra mycket mer än bara att rita text i HTML5! I den här tutorialen kommer jag att visa olika effekter för att göra några snygga texter, inklusive skuggor, lutningar och rotation.