Tutorial zur Verwendung von HTML5 Canvas zum Füllen von Bildern mit Farbe und Textur. Tipps zum HTML5-Tutorial

Füllfarbe

Kunst ist untrennbar mit Farbe verbunden. Heute stellen wir Füllfarbe vor und erleben den Charme der Farbe.
Es gibt zwei Haupttypen von Füllfarben:

1. Grundfarbe
2. Verlaufsfarbe (auch unterteilt in linearen Verlauf und radialen Verlauf)

Schauen wir sie uns einzeln an.

Grundfarbe der Füllung
Die Eigenschaft „Canvas fillStyle“ wird verwendet, um die Grundfarbe und Füllung der Form auf der Leinwand festzulegen. fillStyle verwendet einfache Farbnamen. Das sieht ganz einfach aus, zum Beispiel:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. context.fillStyle = "red";

Das Folgende ist eine Liste von sechzehn verfügbaren Farbzeichenfolgenwerten aus der HTML4-Spezifikation. Da HTML5 die exklusiven Farben nicht verändert, können HTML4-Farben in HTML5 korrekt angezeigt werden.

Alle diese Farbwerte können auf die Eigenschaften StrokeStyle und FillStyle angewendet werden. Okay, lassen Sie mich die Methode zum Füllen von Grundfarben zusammenfassen: (kann auch für das StrokeStyle-Attribut verwendet werden)

(1) Verwenden Sie das Füllen von Farbzeichenfolgen.

JavaScript-Code

Inhalt in die Zwischenablage kopieren

context.fillStyle =
1. "red"; (2) Verwenden Sie das Auffüllen von hexadezimalen Ziffernfolgen.

JavaScript-Code

Inhalt in die Zwischenablage kopieren

context.fillStyle =

"#FF0000"

1. ; (3) Füllen Sie die Abkürzung mit einer hexadezimalen Ziffernfolge aus. JavaScript-Code

Inhalt in die Zwischenablage kopieren

context.fillStyle = "#F00"

;

1. (4) Verwenden Sie die rgb()-Methode, um die Farbe festzulegen. JavaScript-CodeInhalt in die Zwischenablage kopieren

context.fillStyle =

"rgb(255,0,0)";

(5) Verwenden Sie die rgba()-Methode, um die Farbe festzulegen.

1. JavaScript-CodeInhalt in die Zwischenablage kopieren

context.fillStyle =

"rgba(255,0,0,1)"

; Der letzte Parameter dieser Methode ist der Alphawert und der Transparenzbereich liegt zwischen 1 (undurchsichtig) und 0 (transparent).

(6) Verwenden Sie die hsl()-Methode, um die Farbe festzulegen.

1. JavaScript-CodeInhalt in die Zwischenablage kopieren
context.fillStyle =

"hsl(0,100%,50%)"

;

HSL stellt die Farbe der drei Kanäle Farbton (H), Sättigung (S) und Helligkeit (L) dar. (7) Verwenden Sie die hsla()-Methode, um die Farbe festzulegen.

JavaScript-Code

Inhalt in die Zwischenablage kopieren
1. context.fillStyle = "hsla(0,100%,50%,1)"

;

Die oben genannten 7 Codesätze sind alle mit „#FF0000“ in Rot gefüllt.

Verlaufsform füllen
Es gibt zwei grundlegende Optionen zum Erstellen einer Verlaufsfüllung auf der Leinwand: linear oder radial. Lineare Farbverläufe erzeugen ein horizontales, vertikales oder diagonales Füllmuster. Radiale Farbverläufe erzeugen eine radiale Füllung von einem Mittelpunkt aus. Das Füllen einer Verlaufsform erfolgt in drei Schritten: Fügen Sie eine Verlaufslinie hinzu, fügen Sie der Verlaufslinie eine Schlüsselfarbe hinzu und wenden Sie den Verlauf an. Hier sind einige Beispiele dafür.
Linearer Verlauf
Drei-Schritte-Strategie:
Verlaufslinien hinzufügen:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. var grd = context.createLinearGradient(xstart,ystart,xend,yend);

Fügen Sie der Verlaufslinie eine Schlüsselfarbe hinzu (ähnlich einem Farbhaltepunkt):

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. grd.addColorStop(stop,color);

Der Stopp ist hier eine Gleitkommazahl von 0 bis 1, die den Anteil des Abstands vom Haltepunkt bis (xstart, ystart) zur gesamten Gradientenlänge darstellt.

Farbverlauf anwenden:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. context.fillStyle = grd;
2. context.StrokeStyle = grd;

Schreiben Sie einen Code, um einen Blick darauf zu werfen.

JavaScript-Code

Inhalt in die Zwischenablage kopieren

2. "zh">
3. "UTF-8"
4. >
6. "canvas-warp">
7. "canvas"
8. style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;">
9. Ihr Browser unterstützt Canvas nicht? ! Ändere es schnell! !

<script> <span></span> window.onload = </li> <li>function<span></span>(){ </li> <li class="alt"> <span></span> </li> <li>var<span></span> canvas = document.getElementById(</li> <li class="alt">"canvas"<span></span>); <span class="keyword"></span> <span></span> canvas.width = 800; </li> <li> <span></span>canvas.height = 600;<span class="keyword"></span> <span></span> <span class="string"></span>var<span></span> context = canvas.getContext(</li> <li class="alt">"2d"<span></span> </li> <li> <span></span> </li> <li class="alt"> <span></span> context.rect(200,100,400,400); <span class="keyword"></span> <span></span> <span class="string"></span> <span></span> </li> <li>//Verlaufslinie hinzufügen <span></span> </li> <li class="alt"> <span></span> </li> <li>var<span></span> grd = context.createLinearGradient(200,300,600,300); </li> <li class="alt"> <span></span> <span class="comment"></span> <span></span>//Farbhaltepunkte hinzufügen </li> <li> <span></span> <span class="keyword"></span> grd.addColorStop(0,<span></span>"schwarz"</li> <li class="alt"> <span></span> </li> <li> grd.addColorStop(0.5,<span></span>"white"<span class="comment"></span>); <span></span> grd.addColorStop(1,</li> <li class="alt">"black"<span></span> <span class="string"></span> <span></span> </li> <li> <span></span> <span class="string"></span>//Farbverlauf anwenden <span></span> </li> <li class="alt"> <span></span> context.fillStyle = grd; <span class="string"></span> <span></span> </li> <li> <span></span> context.fill(); </li> <li class="alt"> <span></span> <span class="comment"></span> <span></span> } </li> <li> <span></span></script>

Laufergebnis:

Ich denke, es ist notwendig, eine Illustration zu erstellen, damit jeder den Farbverlauf gleichzeitig verstehen kann.

Um das Verständnis zu erleichtern, wird empfohlen, die Gradientenlinie als gerichtetes Liniensegment zu betrachten. Wenn Sie mit Zeichenwerkzeugen wie PS vertraut sind und die Verlaufseinstellungen verwendet haben, sollten Sie über gute Kenntnisse verfügen.
Der Startpunkt und der Endpunkt der Verlaufslinie müssen hier nicht innerhalb des Bildes liegen und die Position des Farbhaltepunkts ist dieselbe. Wenn der Bereich des Bildes jedoch größer als die Verlaufslinie ist, wird außerhalb des Bereichs der Verlaufslinie automatisch die Farbe des Haltepunkts ausgefüllt, der dem Endpunkt am nächsten liegt.
Hier ist ein weiteres Beispiel mit zwei Zusatzfunktionen.

Schnelle Möglichkeit, ein Rechteck zu zeichnen

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. fillRect(x,y,width,height)、stroke(x,y,width,height)。这两个函数可以分别看做rect()与fill()以及rect()与stroke()的组合。因为rect()仅仅只是规划路径而已，而这两个方法确实实实在在的绘制。   
2.   
3. "zh">   
4.   
5.     "UTF-8">   
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

<script> </span></li> window.onload = <li> <span>function</span><span class="keyword">(){ </span><span> </span> </li> <li class="alt"> <span>var</span><span class="keyword"> canvas = document.getElementById(</span><span>"canvas"</span><span class="string">); </span><span> </span> </li> canvas.width = 800; <li><span> </span></li>canvas.height = 600;<li class="alt"><span> </span></li> <li> <span>var</span><span class="keyword"> context = canvas.getContext(</span><span>"2d"</span><span class="string"> </span><span> </span> </li> <li class="alt"><span> </span></li> <li> <span>//Verlaufslinie hinzufügen </span><span class="comment"> </span><span> </span> </li> <li class="alt"> <span>var</span><span class="keyword"> grd = context.createLinearGradient(100,300,700,300); </span><span> </span> </li> <li><span> </span></li>//Farbhaltepunkte hinzufügen <li class="alt"> <span> </span><span class="comment"> </span><span> grd.addColorStop(0,</span> </li>"olive"<li> <span> </span><span class="string"> </span><span> grd.addColorStop(0.25,</span> </li>"maroon"<li class="alt"> <span>); </span><span class="string"> grd.addColorStop(0.5,</span><span>"aqua"</span> </li>); <li> <span> grd.addColorStop(0.75,</span><span class="string">"fuchsia"</span><span>); </span> </li> <li class="alt"> <span> grd.addColorStop(0.25,</span><span class="string">"teal"</span><span>); </span> </li> <li> <span> </span><span class="string"> </span><span>//Farbverlauf anwenden </span> </li> <li class="alt"><span> </span></li> context.fillStyle = grd; <li> <span> </span><span class="comment"> context.strokeStyle = grd; </span><span> </span> </li> <li class="alt"><span> </span></li> context.StrokeRect(200,50,300,50); <li><span> </span></li> context.StrokeRect(200,100,150,50); <li class="alt"><span> </span></li> context.StrokeRect(200,150,450,50); <li><span> </span></li> <li class="alt"><span> </span></li> context.fillRect(200,300,300,50); <li><span> </span></li> context.fillRect(200,350,150,50); <li class="alt"><span> </span></li> context.fillRect(200,400,450,50); <li><span> </span></li> <li class="alt"><span> </span></li> context.fillRect(0,550,800,25); <li><span> </span></li> <li class="alt"><span> </span></li> } <li><span> </span></li></script>

Laufergebnis:

Beide Seiten haben horizontale Farbverläufe, aber es sollte klar sein, dass lineare Farbverläufe nicht unbedingt horizontal sind und die Richtung willkürlich sein kann. Die Richtung wird durch die Endpunkte der Farbverlaufslinie festgelegt.

Radialer Gradient
Es handelt sich ebenfalls um eine dreistufige Strategie, aber die im ersten Schritt verwendete Methode hat sich geändert.
Verlaufskreis hinzufügen:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);

Fügen Sie der Verlaufslinie eine Schlüsselfarbe hinzu (ähnlich einem Farbhaltepunkt):

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. grd.addColorStop(stop,color);

Farbverlauf anwenden:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. context.fillStyle = grd;
2. context.StrokeStyle = grd;

Ein linearer Farbverlauf wird auf der Grundlage von zwei Endpunkten definiert, ein radialer Farbverlauf wird jedoch auf der Grundlage von zwei Kreisen definiert.

Lassen Sie uns Beispiel 7-2 umschreiben.

JavaScript-Code

Inhalt in die Zwischenablage kopieren

2. "zh">
3. "UTF-8"
4. >
6. "canvas-warp">
7. "canvas"
8. style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;">
9. Ihr Browser unterstützt Canvas nicht? ! Ändere es schnell! !

<script> <span></span> window.onload = </li> <li>function<span></span>(){ </li> <li class="alt"> <span></span> </li> <li>var<span></span> canvas = document.getElementById(</li> <li class="alt">"canvas"<span></span>); <span class="keyword"></span> <span></span> canvas.width = 800; </li> <li> <span></span>canvas.height = 600;<span class="keyword"></span> <span></span> <span class="string"></span>var<span></span> context = canvas.getContext(</li> <li class="alt">"2d"<span></span> </li> <li> <span></span> </li> <li class="alt"> <span></span> <span class="keyword"></span>//Verlaufslinie hinzufügen <span></span> <span class="string"></span> <span></span> </li> <li>var<span></span> grd = context.createRadialGradient(400,300,100,400,300,200); </li> <li class="alt"> <span></span> <span class="comment"></span> <span></span> </li> <li>//Farbhaltepunkte hinzufügen <span></span> <span class="keyword"></span> <span></span> grd.addColorStop(0,</li> <li class="alt">"olive"<span></span> </li> <li> <span></span> grd.addColorStop(0.25,<span class="comment"></span>"maroon"<span></span>); </li> <li class="alt"> grd.addColorStop(0.5,<span></span>"aqua"<span class="string"></span>); <span></span> grd.addColorStop(0.75,</li> <li>"fuchsia"<span></span>); <span class="string"></span> <span></span> grd.addColorStop(0.25,</li> <li class="alt">"teal"<span></span>); <span class="string"></span> <span></span> </li> <li> <span></span>//Farbverlauf anwenden <span class="string"></span> <span></span> </li> <li class="alt"> context.fillStyle = grd; <span></span> <span class="string"></span> <span></span> </li> <li> context.fillRect(100,100,600,400); <span></span> </li> <li class="alt"> <span></span> <span class="comment"></span> <span></span> </li> <li> } <span></span> </li> <li class="alt"></script>

Laufergebnis:

Warum finden Sie diese Farbkombination so...vergessen Sie es, das nennt man Kunst.
createRadialGradient(x0,y0,r0,x1,y1,r1); Methode gibt den Start- und Endbereich des radialen Gradienten an, also den Gradienten zwischen zwei Kreisen.
Zusammenfassend haben wir in dieser Lektion etwas über fillStyle, createLinearGradient(), createRadialGradient(), addColorStop(), fillRect(), StrokeRect() und andere Attribute und Methoden gelernt und das Füllen von Grundfarben, linear, ausführlich vorgestellt Farbverläufe und radialer Farbverlauf.
Okay, nachdem wir nun gelernt haben, wie man malt, können wir nach Herzenslust Farben verwenden und unsere eigenen Kunstwerke zeichnen!

Textur füllen

Einführung in createPattern()
Textur ist eigentlich eine Wiederholung des Musters, und das Füllmuster wird durch die Funktion createPattern() initialisiert. Es müssen zwei Parameter createPattern(img,repeat-style) übergeben werden, der erste ist eine Image-Objektinstanz und der zweite Parameter ist ein String-Typ, der angibt, wie das Wiederholungsmuster in der Form angezeigt wird. Mit dieser Funktion können Sie ein Bild oder die gesamte Leinwand als Füllmuster für eine Form laden.
Es gibt die folgenden 4 Bildfülltypen:

1. Auf der Ebene wiederholen:
2. Auf der y-Achse wiederholen nicht verwenden wiederholen: no- wiederholen;

Tatsächlich kann der erste Parameter von createPattern() auch in einem Canvas-Objekt oder Videoobjekt übergeben werden. Hier erklären wir nur das Image-Objekt, den Rest können Sie selbst ausprobieren.

Muster erstellen und füllen
Sehen Sie sich zunächst an, wie Bilder geladen werden:
Erstellen Sie ein Bildobjekt

Geben Sie die Bildquelle für das Bildobjekt an

Der Code lautet wie folgt:

JavaScript-Code

Inhalt in die Zwischenablage kopieren

1. var img = new Image(); //Bildobjekt erstellen
img.src =
2. "8-1.jpg"; //Geben Sie die Bildquelle für das Bildobjekt an

Erweiterung: Der relative Pfad in HTML

'../Verzeichnis- oder Dateiname' oder 'Verzeichnis- oder Dateiname' bezieht sich auf den Pfad des Verzeichnisses, in dem sich die aktuell bearbeitete Datei befindet

'../ Verzeichnis- oder Dateiname' Bezieht sich auf den Pfad des Verzeichnisses oberhalb des Verzeichnisses, in dem sich die aktuell bearbeitete Datei befindet

Textur anschließend auffüllen:

JavaScript-Code

Inhalt in die Zwischenablage kopieren

1. var pattern = context.createPattern(img,"repeat");
context.fillStyle = Muster;

Schauen wir uns direkt ein komplettes Programm an. Hier möchte ich diese süße Giraffe immer wieder als Textur ausfüllen. Es ist zu beachten, dass Sie bei der Auswahl von Bildern Bilder auswählen müssen, die von links nach rechts und von oben nach unten als Textur miteinander kommunizieren, damit keine unnatürlichen kurzen Verbindungen entstehen.

Code unten bereitgestellt.

JavaScript-Code

Inhalt in die Zwischenablage kopieren

2. "zh">
3. "UTF-8"
4. > Texture de remplissage
6. "toile-warp"
7. >
8. "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;">
9. Votre navigateur ne prend pas en charge Canvas ? ! Changez-le vite ! !

<script> </li> <li> <span></span> window.onload = </li> <li class="alt">fonction<span></span>(){ </li> <li> <span></span> </li> <li class="alt">var<span></span> canvas = document.getElementById(<span class="keyword"></span>"canvas"<span></span> </li> <li>); <span></span> toile.width = 800 <span class="keyword"></span> <span></span> toile.hauteur = 600 <span class="string"></span> <span></span> </li> <li class="alt">var<span></span> context = canvas.getContext(</li> <li>"2d"<span></span> </li> <li class="alt">); <span></span> <span class="keyword"></span> <span></span> <span class="string"></span>var<span></span> img = </li> <li>nouveau<span></span> Image(); </li> <li class="alt"> img.src = <span></span>"8-1.jpg"<span class="keyword"></span> <span></span> <span class="keyword"></span> img.onload = <span></span>fonction</li> <li>(){ <span></span> <span class="string"></span> <span></span>var</li> <li class="alt"> pattern = context.createPattern(img, <span></span>"repeat"<span class="keyword"></span> <span></span>); </li> <li> context.fillStyle = motif <span></span> <span class="keyword"></span>context.fillRect(0,0,800,600); <span></span> <span class="string"></span>                                                              <span></span> </li> <li class="alt"> <span></span> } </li> <li> <span></span></script>

Résultat de l'exécution :

L'événement onload de Image est utilisé ici. Sa fonction est de précharger l'image, c'est-à-dire que le corps du code de la fonction suivante sera supprimé immédiatement après le chargement de l'image. C'est nécessaire, si ce n'est pas écrit, la toile affichera un écran noir. La texture étant remplie sans attendre le chargement de l'image, le navigateur ne parvient pas à trouver l'image.

"répéter" est utilisé ici. Les chaussures pour enfants peuvent également essayer d'utiliser les trois autres valeurs pour voir quels différents effets il y aura. Vous pouvez également trouver d'autres images pour essayer de remplir et voir l'effet.