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 -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	默认。规定要使用的图片、画布或视频元素。
repeat-x	该模式只在水平方向重复。
repeat-y	该模式只在垂直方向重复。
no-repeat	该模式只显示一次（不重复）。

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!