Wie man ein Muster als Füllung oder Schlaganfall mit dem HTML5 Canvas-Tag verwenden

jede Operation in HTML5 ist fast Segeltuch Funktion implementiert eine Füllung oder Schlaganfall Stil. Um das Beste aus der Leinwand zu bekommen, müssen Sie verstehen, wie sie funktionieren. Die drei Haupttypen von Arten, die Sie auf Flächen und Konturen verwenden können, sind Farben, Verläufe und Muster.

EIN Muster verwendet wird, um ein Bild zu definieren, um als Füllung oder Schlaganfall eingesetzt werden. Sie können jedes Bild als Muster verwenden, aber es ist im Allgemeinen am besten zu flies entworfen zu finden oder ein Bild erstellen.

Es gibt viele Quellen von gekachelten Muster im Internet verfügbar. Sobald Sie ein Bild haben möchten, dass Sie als Füllmuster zu verwenden, hier ist, wie es in der zu implementieren Segeltuch tag:

 Funktion draw () {var Zeichnung = document.getElementById ( "Zeichnung") - var con = drawing.getContext ( "2D") - var Textur = document.getElementById ( "Textur") - pFill = con.createPattern (Textur " wiederholen ") - con.fillStyle = pFill-con.fillRect (10150190150) -con.font =" 40px sans-serif "-con.fillText (" Pattern ", 20, 80) -con.strokeStyle = pFill-con!. linewidth = 5-con.strokeRect (10, 10, 180, 100) -} // end Unentschieden

Die Ergebnisse dieses Codes sind hier zu sehen:

Ein Muster ist einfach ein Bild. ein Muster Der Aufbau ist relativ einfach:

1. Erhalten Sie Zugang zu einem Bild.

   Sie werden einen javascript-Bildobjekt benötigen als Grundlage für Ihr Muster zu dienen. Es gibt eine Reihe von Möglichkeiten, dies zu tun, aber die einfachste ist, das Bild irgendwo in Ihrem HTML zu erstellen, verstecken sie mit der display: none Stil, und verwenden Sie die Standard document.getElementById () Technik Zugang zu Ihrem Bild zu bekommen.

2. Erstellen Sie eine Variable für das Muster.

   Wie Gradienten können Musterfüllungen wiederverwendet werden, so speichert das Muster in einer Variablen zur späteren Wiederverwendung.

3. Verwenden Sie die create () Verfahren zur Herstellung eines Muster aus einem Bild zu schaffen.

4. Legen Sie den Wiederholungs Parameter des Musters.

   Der zweite Parameter gibt an, wie das Muster wiederholt. Der Standardwert ist "wiederholen", die wiederholt das Muster sowohl in der x und y Achsen auf unbestimmte Zeit. Wenn Ihr Muster nicht mit Ziegeln gedeckt ist, werden Sie eine sichtbare Naht zu sehen, wo sich das Muster wiederholt. Sie können auch den Wiederholungswert eingestellt repeat-x, repeat-y, und no-repeat.

5. Tragen Sie die Mustergröße auf den fillStyle oder stroke.

   Ordnen Sie die Muster Variable in den Kontext des fillStyle (oder stroke) Und dann eine beliebige Füllvorgang auszuführen im Muster zu zeichnen.