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

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

WBOY

Freigeben： 2016-05-16 15:49:15

Original

2036 Leute haben es durchsucht

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