Explication détaillée du code de mosaïque de canevas HTML5

Je travaille récemment sur un projet de site Web et j'utilise beaucoup de toile Il est nécessaire que drawImage dessine l'image dans la toile. L'image est relativement petite et nécessite un effet Tuile comme image d'arrière-plan. PS (l'image d'arrière-plan fait 10px de haut et de large, et la toile à peindre fait 200px de haut et de large)

Comme elle a été dessinée à partir de drawImage au début, la méthode une a été adoptée

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);
}

La hauteur et la largeur de l'image de fond sont de 10, ce qui est un peu fastidieux. Pourquoi ne pas le faire en une seule étape ? Donc ça a été changé de cette façon

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();
}

BON !
Réitérons la définition de createPattern

La méthode createPattern() répète l'élément spécifié dans la direction spécifiée.
Les éléments peuvent être des images, des vidéos ou d'autres éléments 5ba626b379994d53f7acf72a64f9b697
Les éléments répétés peuvent être utilisés pour dessiner/remplir des rectangles, des cercles ou des lignes, etc.

JavaScript Syntaxe :

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

Paramètres Description

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

répéter

Par défaut. Spécifie l’élément image, canevas ou vidéo à utiliser.

repeat-x

Ce motif se répète uniquement horizontalement.

répéter-y

Ce motif se répète uniquement dans le sens vertical.

pas de répétition

Ce mode n'est affiché qu'une seule fois (non répété).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!