Explication détaillée du code de mosaïque de canevas HTML5-Tutoriel H5-php.cn

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

黄舟

Libérer： 2017-04-18 09:59:11

original

2743 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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

JavaScript Syntaxe :

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

Copier après la connexion

Paramètres Description


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