So implementieren Sie Texturfüllungen und -striche (Füllung und Strich) in HTML5 Canvas_html5-Tutorial-Fähigkeiten

Demonstriert HTML5-Canvas-Füllungs- und Strich-Texteffekte sowie die Implementierung von Texturfüllungen und Strichen basierend auf Canvas.

1: Farbfüllung und Strich
Farbfüllung kann durch fillStyle erreicht werden, und Strichfarbe kann durch StrokeStyle erreicht werden. Ein einfaches Beispiel
lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

// Füll- und Strichtext
ctx.font = '60pt Calibri';
ctx.lineWidth = 3;
ctx.StrokeStyle = 'green'; Hallo Welt!', 20 , 100);
ctx.fillStyle = 'red';
ctx.fillText('Hallo Welt!', 20, 100); >2: Texturfüllung und Strich

HTML5 Canvas unterstützt auch die Texturfüllung Durch das Laden eines Texturbilds und das anschließende Erstellen eines Pinselmusters lautet die API zum Erstellen eines Texturmusters ctx.createPattern(imageTexture, „repeat“). ; der zweite Parameter unterstützt vier Die Werte sind „repeat-x“, „repeat-y“, „repeat“ und „no-repeat“, was bedeutet, dass sich die Textur entlang der X-Achse wiederholt oder nicht wiederholt. Y-Achse bzw. XY-Richtung. Der Code für Texturstrich und -füllung lautet wie folgt:

Kopieren Sie den Code

Der Code lautet wie folgt: var woodfill = ctx.createPattern(imageTexture,"repeat"); ctx.StrokeStyle = Woodfill;

// Rechteck füllen

ctx.fillStyle = woodfill;

ctx.fillRect(60, 240, 260, 440);


Texturbild:



Drei: Wirkung ausführen

Code:


Code kopieren

Der Code lautet wie folgt:

Kompatibel“ content="chrome=IE8" >

var imageTexture = null;

window.onload = function() {
var canvas = document.getElementById("text_canvas");
console.log(canvas.parentNode.clientWidth); >canvas.width = canvas.parentNode. clientWidth;
canvas.height = canvas.parentNode.clientHeight;
if (!canvas.getContext) {
console.log("Canvas nicht unterstützt. Bitte installieren Sie a HTML5-kompatibler Browser.");
return;
}
// 2D-Kontext der Leinwand abrufen und Rechteck zeichnen
ctx = canvas.getContext("2d");
ctx.fillStyle= "black";
ctx.fillRect(0, 0, Canvas.width, Canvas.height);
// Füll- und Strichtext
ctx.font = '60pt Calibri'; lineWidth = 3;
ctx.strokeStyle = 'green';
ctx.fillText('Hallo Welt!', 20, 100); ('Hallo Welt!', 20, 100);
// Füllen und Strichen nach Muster
imageTexture = document.createElement('img');
imageTexture.src = "../pattern.png ";
imageTexture.onload = geladen();
}
Funktion geladen() {
// Verzögerung bis zum Laden des Bildes
setTimeout(textureFill, 1000/30);
}
function textureFill() {
// var woodfill = ctx.createPattern(imageTexture, "repeat-x");
// var woodfill = ctx.createPattern(imageTexture, "repeat-y");
// var woodfill = ctx .createPattern(imageTexture, "no-repeat");
var woodfill = ctx.createPattern(imageTexture, "repeat");
ctx.StrokeStyle = Woodfill; ctx.StrokeText('Hallo Welt!', 20, 200);
// Rechteck füllen
ctx.fillStyle = woodfill;
}

HTML5 Canvas Text Demo - Von Gloomy Fish

 Füllung und Strich

;/body>
< /html>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn