Hur man använder ett mönster som en fyllnings- eller linjer med HTML5 Canvas Tag

January 4

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.

Ett mönster används för att definiera en bild som skall användas som en fyllning eller linje. Du kan använda bilder som ett mönster, men det är generellt bäst att hitta eller skapa en bild avsedd att kaklat.

Det finns många källor för kaklade mönster på nätet. När du har en bild som du vill använda som fyllningsmönster, här är hur man ska genomföra den i duken taggen:

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

pFill = con.createPattern (textur, "repeat");
con.fillStyle = pFill;
con.fillRect (10150190150);
con.font = "40px sans-serif";
con.fillText ("Mönster!", 20, 80);
con.strokeStyle = pFill;
con.lineWidth = 5;
con.strokeRect (10, 10, 180, 100);
} // End draw

Resultaten av denna kod visas här:

Hur man använder ett mönster som en fyllnings- eller linjer med HTML5 Canvas Tag

Ett mönster är helt enkelt en bild. Att bygga ett mönster är relativt enkelt:

  1. Få tillgång till en bild.

    Du behöver en JavaScript bildobjekt för att ligga till grund för ditt mönster. Det finns ett antal sätt att göra detta, men det enklaste är att skapa bilden någonstans i din HTML, dölja det med display: none stil, och använd standard document.getElementById () teknik för att få tillgång till din bild.
  2. Skapa en variabel för mönstret.

    Liksom övertoningar, kan mönsterfyllningar återanvändas, så förvara mönster i en variabel för senare återanvändning.
  3. Använd createPattern () för att skapa ett mönster från en bild.
  4. Ange mönstret s upprepning parameter.

    Den andra parametern anger hur mönstret kommer att upprepa. Standardvärdet är "repeat", som upprepar mönstret i både x- och y-axlarna på obestämd tid. Om mönstret inte är kaklat, kommer du att se en synlig söm där mönstret upprepar. Du kan även ställa in upprepningsvärdet att upprepa-x, upprepa-y, och ingen upprepning.
  5. Applicera mönstret variabel till Fillstyle eller strokeStyle.

    Tilldela mönstret variabeln till sammanhanget s Fillstyle (eller strokeStyle) och sedan utföra någon fyllningsoperation för att rita i mönstret.