Innehållsförteckning
När du använder föremålet duk för att rita är vi inte begränsade till att rita rektangulära figurer, vi kan också rita med hjälp av koordinater och den s.k vägar som är vägar genom vilka vi kommer att indikera elementet duk var och hur vi visar vår teckning.Möjligheterna som detta ger oss är imponerande, för med de nödvändiga algoritmerna kan vi göra obegränsade kompositioner, rita in alla typer av figurer i HTML5 och med det tills uppnått i kombination med andra element resultat som aldrig föreställts i tidigare specifikationer för språket.
Använda Path
Som vi nämnde väg är det som gör det möjligt för oss att ange för duken vilka koordinater som ritningen ska göras med, med dessa koordinater kan duken veta var man ska dra motsvarande linjer och i slutändan med korrekt ackumulering av linjer kan vi uppnå alla typ av figur.
Innan vi går vidare till motsvarande exempel måste vi veta vilka metoder som är tillgängliga för canvaselementet och sökvägen, låt oss se följande lista:
- beginPath (): Denna metod gör att vi kan börja en ny väg.
- closePath (): Denna metod försöker stänga den aktuella sökvägen genom att dra en linje från slutet av den sista raden till de initiala koordinaterna.
- fill (): Fyll i formulär som beskrivs av delvägarna.
- isPointInPath (x, y): Returnerar sant om den angivna punkten finns i den form som ritas av den aktuella sökvägen.
- lineTo (x, y): Rita en delväg vid de angivna koordinaterna.
- moveTo (x, y): Det tillåter oss att gå till de angivna koordinaterna utan att behöva rita en delväg.
- rekt (x, y, w, h): Rita en rektangel vars koordinater i det övre vänstra hörnet motsvarar (x, y) dess bredd motsvarar w och dess höjd motsvarar h.
- stroke (): Rita de yttre linjerna i de former som ritas av delbanan.
• Vi kallar metoden beginPath.
• Vi går till utgångsläget med hjälp av metoden flytta till.
• Vi ritar delvägarna med metoderna lineTo, etc.
• Valfritt kan vi kalla metoden closePath.
• Slutligen kallar vi metoderna fylla eller stoke.
Vi har redan den rekommenderade ordningen för att börja rita nu ser vi motsvarande kod i HTML5.
Exempel Din webbläsare stöder inte elementet duk Som vi kan se görs två samtal till beginPath(), med detta kan vi starta ritningsområdena på duken sedan med moveTo () fastställer vi de ursprungliga positionerna och resten är att rita.
Låt oss se hur vår ritning ser ut i webbläsaren:
