Indholdsfortegnelse
Når du bruger varen lærred for at tegne er vi ikke begrænset til at tegne rektangulære figurer, vi kan også tegne ved hjælp af koordinater og det såkaldte stier som er stier, hvormed vi vil angive elementet lærred hvor og hvordan vi viser vores tegning.Mulighederne, som dette giver os, er imponerende, for med de nødvendige algoritmer kan vi lave ubegrænsede kompositioner, tegne enhver form for figur i HTML5 og med det indtil opnåelse i forbindelse med andre elementer resultater, der aldrig var forestillet i tidligere specifikationer for sproget.
Brug af sti
Som vi nævnte sti er det, der giver os mulighed for at angive til lærredet de koordinater, hvormed tegningen skal laves, med disse koordinater vil lærredet kunne vide, hvor vi skal tegne de tilsvarende linjer og til sidst med den korrekte akkumulering af linjer kan vi opnå enhver type figur.
Inden vi går videre til de tilsvarende eksempler, skal vi vide, hvilke metoder der er tilgængelige for lærredselementet og stien, lad os se følgende liste:
- beginPath (): Denne metode giver os mulighed for at starte en ny vej.
- closePath (): Denne metode forsøger at lukke den aktuelle sti ved at tegne en linje fra slutningen af den sidste linje til de indledende koordinater.
- fill (): Udfyld formularerne beskrevet af delstierne.
- isPointInPath (x, y): Returnerer true, hvis det angivne punkt er indeholdt i den form, der tegnes af den aktuelle sti.
- lineTo (x, y): Tegn en understi ved de angivne koordinater.
- moveTo (x, y): Det giver os mulighed for at flytte til de angivne koordinater uden at skulle tegne en understi.
- ret (x, y, w, h): Tegn et rektangel, hvis koordinater i øverste venstre hjørne svarer til (x, y) dets bredde svarer til w, og dens højde svarer til h.
- slag (): Tegn de ydre linjer af figurerne tegnet af underbanen.
• Vi kalder metoden beginPath.
• Vi bevæger os til udgangspositionen ved hjælp af metoden flytte til.
• Vi tegner delstierne med metoderne lineTo, etc.
• Eventuelt kan vi kalde metoden closePath.
• Endelig kalder vi metoderne fylde eller stoke.
Vi har allerede den anbefalede ordre til at begynde at tegne, nu ser vi den tilsvarende kode i HTML5.
Eksempel Din browser understøtter ikke elementet lærred Som vi kan se, foretages der to opkald til beginPath(), med dette kan vi starte tegneområderne på lærredet, derefter med moveTo () etablerer vi de oprindelige positioner, og resten er at tegne.
Lad os se, hvordan vores tegning ser ud i browseren:
