Código Core JS
A cópia do código é a seguinte:
/*
*Canvasid: HTML Canvas Tag ID
*imageId: html img tag ID
*GridCountx: Número de segmentação de imagem do eixo x
*GridCounty: o número de segmentação de imagem do eixo y
*Gridspace: espaço da grade
*Offsetx: X*y grade em relação à tela (0, 0) x Offset de coordenadas
** Offsetx: X*y Grid em relação à tela (0, 0) y Coordenar Offset
*Isanimat: se deve habilitar a exibição de animação
*/
Função 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 (imagem, 0, 0);
var imagagedata = g.getImagedata (0, 0, image.width, imagem.Height);
var grid_width = imagedata.width / gridcountx;
var grid_Height = imagedata.Height / GridCounty;
//Animação
if (isanimat) {
var x = 0,
y = 0;
var inter = setInterval (function () {
g.putImagedata (Imagergedata, GridSpace * x + offsetx, gridspace * y + offsety, 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): nulo;
} else {// não animação
for (var y = 0; y <gridcounty; y ++) {
for (var x = 0; x <gridcountx; x ++) {
g.putImagedata (Imagergedata, GridSpace * x + offsetx, gridspace * y + offsety, grid_width * x, grid_height * y, grid_width, grid_height);
}
}
}
}
Código HTML
A cópia do código é a seguinte:
<canvas id = "canvas1"> demonstração de tela </lVAs>
<img id = "image1" style = "display: nenhum" src = "// files.vevb.com/file_images/article/201412/2014122894620636.jpg"/>
Como usar:
A cópia do código é a seguinte:
// por exemplo ...
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
O código é muito conciso, mas o efeito é muito legal. Você aprendeu?