Code de base JS
La copie de code est la suivante:
/ *
* Canvasid: ID de balise de toile HTML
* ImageId: ID de balise HTML IMG
* GridCountx: numéro de segmentation d'image de l'axe X
* GridCounty: le nombre de segmentation d'image de l'axe y
* Gridspace: Espace de grille
* Offsetx: X * y Grid par rapport à la toile (0, 0) x décalage des coordonnées
** Offsetx: X * y Grid par rapport à la toile (0, 0) Offset de coordonnées y
* Isanimat: s'il faut activer l'affichage d'animation
* /
fonction ImageGrid (Canvasid, ImageId, GridCountx, GridCounty, GridSpace, OffsetX, Offsety, IsanImat) {
var image = new image ();
var g = document.getElementById (canvasid) .getContext ("2d");
var img = document.getElementById (imageId);
image.src = img.getAttribute ("src");
G.DrawImage (image, 0, 0);
var imagedata = g.getImagedata (0, 0, image.width, image.height);
var grid_width = imagedata.width / gridCountx;
var grid_height = imagedata.height / gridcounty;
//Animation
if (isanimat) {
var x = 0,
y = 0;
var inter = setInterval (function () {
g.putImagedata (imagedata, gridspace * x + offsetx, gridspace * y + offsey, grid_width * x, grid_height * y, grid_width, grid_height);
x <gridCountx? x ++: x = 0;
if (x == 0) {
y <gridcounty? y ++: y = 0;
}
}, 200);
y == gridcounty? ClearInterval (inter): null;
} else {// non-animation
pour (var y = 0; y <gridcounty; y ++) {
pour (var x = 0; x <gridCountx; x ++) {
g.putImagedata (imagedata, gridspace * x + offsetx, gridspace * y + offsey, grid_width * x, grid_height * y, grid_width, grid_height);
}
}
}
}
code html
La copie de code est la suivante:
<canvas id = "canvas1"> Demo canvas </ canvas>
<img id = "image1" style = "affiche: aucun" src = "// files.vevb.com/file_images/article/201412/2014122894620636.jpg" />
Comment utiliser:
La copie de code est la suivante:
// par exemple ...
ImageGrid ("Canvas1", "Image1", 3, 3, 2, 220, 0, True); // 3 * 3
ImageGrid ("Canvas1", "Image1", 4, 4, 2, 440, 0, True); // 4 * 4
ImageGrid ("Canvas1", "image1", 3, 4, 2, 660, 0, false); // 3 * 4
Le code est très concis, mais l'effet est très cool. L'avez-vous appris?