Ved hjelp av farger og gradienter med HTML5 Canvas Tag - dummies

Nesten hver operasjon i HTML5s lerretfunksjon implementerer en fyllings- eller slagstil. For å få mest mulig ut av lerretet, må du forstå hvordan de fungerer. De tre primære typene stiler du kan bruke på fyll og slag er farger, gradienter og mønstre.

Bruk av farger med HTML5-lerretetiketten

For å angi en fylling eller strekkfarge i lerretet, kan du bruke de samme fargene som brukes i CSS og HTML:

• Sesifrede hex-verdier: Den sekssifrede heksadesimale ordningen som vanligvis brukes i CSS, bruker to siffer hver for rød, grønn og blå. Verdien begynner med et pund tegn. For eksempel er # FF0000 rød, og # FFFF00 er gul.

• Tresifrede hex-verdier: Hex-fargeværdier bruker ofte gjentatte verdier, slik at du kan forkorte disse verdiene som tresifrede tall. I denne ordningen er rød # F00, og gul er # FF0.

• Farge navn: Du kan ofte bruke farge navn, som "rød" eller "gul". "Vanlige farge navn vil vanligvis fungere, men ikke alle nettlesere støtter samme liste med farge navn; "Papaya pisk" er ikke sannsynlig å bli støttet.

• RGB og RGBA-verdier: Du kan bruke rgb () -funksjonen til å lage farger ved hjelp av heltall (0-255) eller prosenter (0% -100%). Rød er rgb (255, 0, 0) og gul er rgb (100%, 100%, 0%). Merk at rgb-funksjonen må gå i anførselstegn som enhver annen fargeverdi. Hvis du vil inkludere alfa, legg til en fjerde parameter, som er en null-en verdi. Transparent rød ville være rgba (255, 0, 0, 0. 5).

• HSL og HSLA: De nye hsl- og hsla-fargene formodes å være støttet av lerretelementet, men så langt varierer støtten til disse funksjonene med nettleseren.

Merk at de forskjellige verdiene for en farge alltid er vedlagt i sitater. Fargeparameteren er en streng som kan tolkes som en CSS-farge.

Bruk av gradienter med HTML5 lerretetiketten

Du kan også fylle en form med en gradient. Kanalgradienter er definert i to trinn:

• Opprett et gradientobjekt. Det er to metoder bygd inn i kontekstobjektet for dette. Man bygger lineære gradienter, og den andre bygger radiale gradienter.

• Legg til fargestopp. A fargestopp er et spesielt element som indikerer en farge som skal legges til gradienten. Du kan legge til så mange farger som du vil, og du kan også angi hvor langs fargemønsteret fargen vil vises.

Følgende kode bygger en radial gradient og en lineær gradient på et lerret:

funksjonstegn () {var drawing = document. getElementById ("drawing"); var con = tegning.getContext ("2D"); // bygge en lineær gradient lGrad = con. createLinearGradient (0, 0, 100, 200); lGrad. addColorStop (0, "# FF0000"); lGrad. addColorStop (.5, "# 00FF00"); lGrad. addColorStop (1, "# 0000FF"); lure. fillStyle = lGrad; lure. fillRect (0, 0, 100, 200); // bygge en radial gradient rGrad = con. createRadialGradient (150, 100, 0, 150, 100, 100); rGrad. addColorStop (0, "# FF0000"); rGrad. addColorStop (.5, "# 00FF00"); rGrad. addColorStop (1, "# 0000FF"); lure. fillStyle = rGrad; lure. fillRect (100, 0, 200, 200);} // ende tegning

Utgangen av denne koden er vist her:

A lineær gradient er et mønster av farger som blander seg i hverandre langs en rett linje. For å definere en lineær gradient, følg disse trinnene:

1. Opprett en variabel for å holde gradienten.

   Gradienter er litt mer komplekse enn enkle farger, så de lagres i variabler som skal gjenbrukes.

2. Bygg gradienten, ved hjelp av metoden createLinearGradient () i kontekstobjektet, for å bygge en lineær gradient.

3. Definer gradientbanen med metoden createLinearGradient ().

   Det forventer fire parametere som definerer en linje (x1, y1, x2, y2). Fargene vil være vinkelrett på denne linjen, så hvis du vil ha horisontale fargebånd, tegne en vertikal linje. Hvis du vil ha vertikale fargebånd, tegner du en horisontal linje. Linjen tar vanligvis hele bredden eller høyden av elementet, men det trenger ikke. Hvis linjen er mindre enn bildet, blir overskytningsområdet automatisk tilordnet fargen fra nærmeste ende av gradienten.

4. Legg til fargestopp.

   Gradienter er ikke så morsomme uten farger. Metoden addColorStop () i gradientobjektet lar deg legge til en farge i gradienten. Hver fargestopp har to parametre: posisjon og farge. Posisjonen er en 0-1-verdi som angir hvor på fargelinjen fargen skal plasseres. 0 er begynnelsen, 1 er slutten, og mellomverdiene er i midten. Fargeparameteren er en tekstverdi som kan vurderes som en CSS-farge. I det minste bør du definere to fargestopp, en for begynnelsen og en for enden.

5. Bruk gradienten som fyllemønster.

   Hvis du vil bruke gradienten som fyllemønster, må du sette kontekstens fillStyle til gradientvariabelen du nettopp har opprettet. Alle påfølgende fyllinger vil bli gjort ved hjelp av gradientmønsteret (til fillStyle er endret til noe annet).

Radiale gradienter er like. I stedet for å tegne en gradient i en rett linje tegner de en rekke sirkulære fargebånd. Den første farge er senterets sirkel, og den siste fargen definerer en ytre radius. Å bygge en radial gradient ligner veldig på å bygge en lineær gradient. Den eneste forskjellen er opprett kommandoen.

Bruk konsollobjektets createRadialGradient () -metode for å bygge en radialgradient. Denne kommandoen tar egentlig seks parametre:

• beginX : Startpunktets X-posisjon. Dette er ofte i midten av form.

• beginY : Dette bestemmer begynnelsesposisjonen for din gradient sammen med begynnelsen.

• beginRadius : Radius av senterets sirkel. Vanligvis er dette null, men du kan gjøre det større hvis du vil understreke sentrumsfarge mer.

• endX : Beskriver sluttposisjonens X-posisjon. Vanligvis er dette det samme som startX.

• endy : Sammen med endX definerer posisjonen til sluttcirkelen. Hvis start- og sluttkretsene har de samme posisjonene, får du en sirkulær gradient. Endre sluttposisjonen for å gjøre strekningen strek i en bestemt retning.

• endRadius : Sluttradiusen definerer hvor den siste fargegradienten skal plasseres. Mindre verdier for denne radiusen vil føre til en tett gruppert gradient, og større verdier vil spre gradienten langs et større område.

Når gradienten er definert, fungerer metoden addColorStops () akkurat som den gjør for lineære gradienter. Variabelen opprettet via kommandoen addRadialGradient () lagres vanligvis i en variabel, der den kan brukes til etterfølgende fillStyle () forespørsler.