Använda färger och övertoningar med HTML5 Canvas Tag

October 17

Nästan varje operation i HTML5 duk funktion genomför en fyllning eller linje stil. För att få ut det mesta av canvas, måste du förstå hur de fungerar. De tre huvudsakliga typer av stilar som du kan använda på fyllningar och linjer är färger, övertoningar och mönster.

Tillämpa färger med HTML5 canvas taggen

Att ange en fyllning eller linje färg i duken taggen, kan du använda samma färgverktyg som du använder i CSS och HTML:

  • Sexsiffrigt hex värden: Den sexsiffriga hexadecimala systemet vanligen används i CSS använder två siffror vardera för rött, grönt och blått. Värdet börjar med ett nummertecken. Till exempel är # FF0000 röd, och # FFFF00 är gul.
  • Tresiffriga hexvärdena: Hex färgvärden använder ofta upprepande värden, så att du kan förkorta dessa värden som tresiffriga tal. I detta system, är röd # F00, och gult är # FF0.
  • Färgnamn: Du kan ofta använda färgnamn, som "röda" eller "gula". Vanliga färgnamn kommer vanligtvis att fungera, men inte alla webbläsare stödja samma lista med färgnamn; "Papaya whip" är inte troligt att stödjas.
  • RGB och RGBA värden: Du kan använda rgb () funktionen för att skapa färger med heltal (0-255) eller i procent (0% -100%). Rött är rgb (255, 0, 0) och gult är rgb (100%, 100%, 0%). Observera att rgb-funktionen måste gå in offerter som alla andra färgvärde. Om du vill inkludera alfa, lägga till en fjärde parametern, som är en noll ett värde. Transparent röd skulle vara RGBA (255, 0, 0, 0.5).
  • HRT och HSLA: De nya HSL och HSLA färgformat är tänkt att stödjas av duken elementet, men hittills har stöd för dessa funktioner varierar beroende på webbläsare.

Observera att de olika värdena för en färg är alltid omges av citattecken. Färgen parametern är en sträng som kan tolkas som en CSS färg.

Tillämpa övertoningar med HTML5 canvas taggen

Du kan också fylla en form med en gradient. Tote gradienter definieras i två steg:

  • Skapa en gradient objekt. Det finns två metoder som är inbyggda i kontextobjektet för detta. Man bygger linjära gradienter, och den andra bygger radiella övertoningar.
  • Lägg färgsteg. En färg stopp är en speciell faktor som indikerar en färg som ska läggas till gradienten. Du kan lägga till så många färger som du vill, och du kan även ange var längs gradienten mönstret färgen visas.

Följande kod bygger en radiell övertoning och en linjär gradient på en duk:

Funktionen draw () {
var ritning = document.getElementById ("ritning");
var con = drawing.getContext ("2d");

// Bygga en linjä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);
// Bygga en radiell 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 draw

Utgången av denna kod visas här:

Använda färger och övertoningar med HTML5 Canvas Tag

En linjär gradient är ett mönster av färger som smälter in i varandra längs en ​​rak linje vägen. För att definiera en linjär gradient, så här:

  1. Skapa en variabel för att hålla gradienten.

    Gradienter är lite mer komplicerad än enkla färger, så de lagras i variablerna som skall återanvändas.
  2. Bygg gradienten, med hjälp av createLinearGradient () för sammanhanget objektet för att bygga en linjär gradient.
  3. Definiera gradienten banan med createLinearGradient () metoden.

    Det förväntar sig fyra parametrar som definierar en linje (x1, y1, x2, y2). Färgerna kommer att vara vinkelrät mot denna linje, så om du vill horisontella färgband, rita en lodrät linje. Om du vill ha vertikala färgbanden, rita en horisontell linje. Linjen tar normalt upp hela bredden eller höjden på elementet, men det behöver inte. Om linjen är mindre än bilden, kommer överskottet området automatiskt tilldelas färgen från närmaste änden av gradienten.
  4. Lägg färgsteg.

    Lutningar är inte roligt utan färger. Den addColorStop () för gradienten objektet kan du lägga till en färg till toningen. Varje färgsteg har två parametrar: position och färg. Positionen är en 0-1 värde som anger var på lutning linjen färgen bör placeras. 0 är början, 1 är slutet, och mellanliggande värden är i mitten. Färgen parametern är ett textvärde som kan utvärderas som en CSS färg. På ett minimum, bör du definiera två färgsteg, ett för början och en i slutet.
  5. Applicera gradienten som fyllningsmönster.

    Om du vill använda gradienten som fyllningsmönster, ställa sammanhanget s Fillstyle till lutningen variabel som du just skapat. Alla efterföljande fyllningar kommer att ske med hjälp av gradient mönster (tills Fillstyle ändras till något annat).

Radiella övertoningar är liknande. Hellre än att dra en gradient i en rak linje, drar de en serie cirkulära färgbanden. Den första färgen är centrum för den cirkel, och den sista färgen definierar en yttre radie. Att bygga en radiell lutning är mycket likt att bygga en linjär gradient. Den enda skillnaden är kommandot skapa.

Använd konsol objektets createRadialGradient () för att bygga en radiell övertoning. Detta kommando tar faktiskt sex parametrar:

  • beginX: X läget för startpunkten. Detta är ofta i centrum av din form.
  • beginY: Tillsammans med beginX bestämmer detta början positionen för din lutning.
  • beginRadius: radie din mittcirkeln. Vanligtvis är noll, men du kan göra den större om du vill framhäva mitt färgen mer.
  • endX: Beskriver X-position ändelsen cirkeln. Normalt är detta detsamma som beginX.
  • Endy: Tillsammans med endX definierar positionen av ändelsen cirkeln. Om början och slutar cirklar har samma positioner, får du en cirkulär övertoning. Ändra slutposition för att göra gradienten sträcka i en viss riktning.
  • endRadius: Ändelsen radie definierar var den sista färggradienten kommer att placeras. Mindre värden för denna radie kommer att leda till en tätt grupperade lutning, och större värden kommer att sprida gradienten utmed ett större område.

När gradienten är definierad, fungerar de addColorStops () metoden precis som det gör för linjära övertoningar. Variabeln skapas genom addRadialGradient () Kommandot används oftast lagras i en variabel, där det kan användas för efterföljande Fillstyle () begäran.