Ved hjelp av farger og graderinger med HTML5 Canvas Tag

February 6  by Eliza

Nesten hver operasjon i HTML5 rens lerret funksjon implementerer en fyll- eller strek stil. For å få mest ut av lerretet, må du forstå hvordan de fungerer. De tre primære typer stiler du kan bruke på fyll og slag er farger, graderinger og mønstre.

Påføring farger med HTML5 lerret tag

Hvis du vil angi en fyll- eller strekfarge i lerretet koden, kan du bruke samme farge verktøyene du bruker i CSS og HTML:

  • Seks-sifret hex verdier: De seks-sifrede heksadesimale ordningen vanligvis brukes i CSS bruker to sifre hver for rød, grønn og blå. Verdien begynner med et firkanttegn. For eksempel, er # FF0000 rødt, og # FFFF00 er gul.
  • Tresifrede hex verdier: Hex fargeverdiene bruker ofte gjentatte verdier, slik at du kan forkorte disse verdiene som tresifrede tall. I denne ordningen, er rød # F00, og gult er # FF0.
  • Fargenavn: Du kan ofte bruke fargenavn, som "rød" eller "gul". Vanlige fargenavn vil normalt fungere, men ikke alle nettlesere støtter den samme listen over fargenavn; "Papaya pisk" er ikke sannsynlig å bli støttet.
  • RGB og RGBA verdier: Du kan bruke rgb () funksjon for å lage farger ved hjelp av heltall (0-255) eller prosenter (0% -100%). Rødt er rgb (255, 0, 0) og gul er rgb (100%, 100%, 0%). Merk at rgb funksjonen må gå i sitater som alle andre fargeverdi. Hvis du ønsker å inkludere alpha, legge til en fjerde parameter, som er et null-én verdi. Gjennomsiktig rød ville være RGBA (255, 0, 0, 0.5).
  • HSL og HSLA: De nye hsl og HSLA fargeformater er ment å bli støttet av lerretet element, men så langt har støtte for disse funksjonene varierer fra nettleser.

Legg merke til at de ulike verdier for en farge er alltid anførselstegn. Den fargeparameter er en streng som kan tolkes som en CSS farge.

Påføring gradienter med HTML5 lerret tag

Du kan også fylle en figur med en gradient. Lerret gradienter er definert i to trinn:

  • Lag en gradient objekt. Det er to metoder innebygd i sammenheng objekt for dette. Man bygger lineære gradienter, og den andre bygger radial gradienter.
  • En farge stopp er en spesiell element som indikerer en farge som skal legges til gradient legge farge stopper.. Du kan legge til så mange farger som du vil, og du kan også angi hvor langs gradient mønster fargen vil vises.

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

funksjon draw () {
Var tegning = document.getElementById ("tegning");
Var con = drawing.getContext ("2d");

// Sett sammen en lineær gradient
lGrad = con.createLinearGradient (0,0,100,200);
lGrad.addColorStop (0, "# FF0000");
lGrad.addColorStop (0,5, "# 00FF00");
lGrad.addColorStop (1, "# 0000FF");

con.fillStyle = lGrad;
con.fillRect (0, 0, 100, 200);
// Bygge en radial gradient
rGrad = con.createRadialGradient (150, 100,
0, 150, 100, 100);
rGrad.addColorStop (0, "# FF0000");
rGrad.addColorStop (0,5, "# 00FF00");
rGrad.addColorStop (1, "# 0000FF");
con.fillStyle = rGrad;
con.fillRect (100,0, 200, 200);
} // End uavgjort

Utgangen fra denne kode er vist her:

Ved hjelp av farger og graderinger med HTML5 Canvas Tag

En lineær gradient er et mønster av farger som går i hverandre langs en ​​rett linje banen. Å definere en lineær gradient, gjør du følgende:

  1. Lag en variabel for å holde graderingen.

    Gradienter er litt mer komplisert enn enkle farger, slik at de blir lagret i variabler for å brukes om igjen.

  2. Bygg gradient, ved hjelp av createLinearGradient () metoden i sammenheng objekt til å bygge en lineær gradient.
  3. Definere gradient banen med createLinearGradient () -metoden.

    Det forventer fire parametere som definerer en linje (x1, y1, x2, y2). Fargene vil være vinkelrett på denne linjen, så hvis du ønsker horisontale fargebånd, tegne en vertikal linje. Hvis du ønsker vertikale fargebånd, tegne en horisontal linje. Linjen vanligvis tar opp hele bredden eller høyden av elementet, men det har ikke til. Hvis linjen er mindre enn bildet, vil det overskytende området automatisk tildelt fargen fra den nærmeste enden av gradienten.

  4. Legg farge stopper.

    Gradienter er ikke mye moro uten farger. Den addColorStop () metoden på graderingen objektet kan du legge til en farge til graderingen. Hver farge stop har to parametere: posisjon og farge. Stillingen er en 0-1 verdi som indikerer hvor på gradient linje fargen skal plasseres. 0 er begynnelsen, en er slutten, og mellomliggende verdier er i midten. Fargen parameter er en tekstverdi som kan evalueres som en CSS farge. På et minimum, bør du definere to farge stopper, en for begynnelsen og én på slutten.

  5. Påfør gradient som fyllmønster.

    Hvis du ønsker å bruke gradient som fyllmønster, setter sammenheng er fillStyle til gradient variabel du nettopp opprettet. Alle påfølgende fills vil bli gjort ved hjelp av gradient mønster (inntil fillStyle endres til noe annet).

Radial gradienter er like. Snarere enn å tegne en gradient i en rett linje, tegner de en serie av sirkulære fargebånd. Den første farge er sentrum av sirkelen, og den siste farge definerer en ytre radius. Bygge en radial gradient er svært lik bygge en lineær gradient. Den eneste forskjellen er skape kommandoen.

Bruke konsollen objektets createRadialGradient () metode for å bygge en radial gradient. Denne kommandoen faktisk tar seks parametere:

  • beginX: X-posisjonen til startpunktet. Dette er ofte i sentrum av formen.
  • beginY: Sammen med beginX, bestemmer dette begynnelsen posisjonen din gradient.
  • beginRadius: The radius av din midtsirkelen. Vanligvis er dette null, men du kan gjøre det større hvis du ønsker å fremheve sentrum fargen mer.
  • endX: Beskriver X-posisjonen av slutt sirkel. Vanligvis er dette det samme som beginX.
  • endy: Sammen med endX definerer posisjonen til slutt sirkel. Hvis start- og slutt sirkler har de samme posisjonene, vil du få en sirkulær gradient. Endre sluttposisjonen til å gjøre gradient strekningen i en bestemt retning.
  • endRadius: Endelsen radius definerer hvor den siste fargen gradient vil bli plassert. Lavere verdier for dette område vil gi en tett gruppert gradient, og større verdier vil spre gradient langs et større område.

Når gradient er definert, skal addColorStops () metoden fungerer akkurat som den gjør for lineære gradienter. Den variable opprettet gjennom addRadialGradient () -kommando er vanligvis lagret i en variabel, hvor den kan brukes til etterfølgende fillStyle () forespørsler.