Heim >Web-Frontend >H5-Tutorial >Detaillierte Erläuterung des HTML5-Canvas-Kachelcodes
Ich arbeite kürzlich an einem Website-Projekt und verwende viel Canvas. Es besteht Bedarf an drawImage, um Bilder auf dem Canvas zu zeichnen . Das Bild ist relativ klein, daher benötige ich den Kacheleffekt als Hintergrundbild. PS (das Hintergrundbild ist 10 Pixel hoch und breit und die zu malende Leinwand ist 200 Pixel hoch und breit)
Da es gezeichnet wurdeBild am Anfang, die Methode eins wurde übernommen
var canvas = document.getElementById("canvasId"); var ctx = canvas.getContext("2d"); var img = new Image(); //需要平铺的图片 img.src = "test1_bg.jpg"; img.onload = function (){ var can = document.createElement("canvas"); can.width = 10; can.height = 10; var ctx2 = can.getContext("2d"); ctx2.drawImage(img,0,0,10,10,0,0,10,10); ctx.fillStyle = ctx.createPattern(can,"repeat"); ctx.fillRect(0,0,200,200); }
Die Höhe und Breite des Hintergrundbilds beträgt 10, was etwas umständlich ist. Warum nicht in einem Schritt? Also wurde es so geändert
var canvas = document.getElementById("canvasId"); var ctx = canvas.getContext("2d"); var img = new Image(); //需要平铺的图片 img.src = "test1_bg.jpg"; img.onload = function (){ var pat = ctx.createPattern(img,"repeat"); ctx.rect(0,0,200,200); ctx.fillStyle = pat; ctx.fill(); }
GUT!
Wiederholen wir die Definition von createPattern
Die Methode createPattern() wiederholt das angegebene Element in der angegebenen Richtung.
Elemente können Bilder, Videos oder andere 7bb634bb62013eca5a2aa233c387b1db-Elemente sein.
Wiederholte Elemente können zum Zeichnen/Füllen von Rechtecken, Kreisen oder Linien usw. verwendet werden.
JavaScript Syntax:
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
Parameter Beschreibung
|
|||||||||||
repeat | Standard. Gibt das zu verwendende Bild-, Canvas- oder Videoelement an. | ||||||||||
repeat-x | Dieses Muster wiederholt sich nur horizontal. | ||||||||||
repeat-y | Dieses Muster wiederholt sich nur in vertikaler Richtung. | ||||||||||
no-repeat | Dieser Modus wird nur einmal angezeigt (nicht wiederholt). |
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des HTML5-Canvas-Kachelcodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!