Código Core JS
La copia del código es la siguiente:
/*
*Canvasid: ID de etiqueta de lona HTML
*ImageId: ID de etiqueta html img
*GridCountx: número de segmentación de imágenes del eje X
*GridCounty: el número de segmentación de imágenes del eje Y
*Gridspace: espacio de cuadrícula
*offsetX: cuadrícula x*y en relación con el lienzo (0, 0) x coordenada compensación
** offsetX: rejilla x*y en relación con el lienzo (0, 0) y compensación de coordenadas
*Isanimat: si habilita la pantalla de animación
*/
function ImageGrid (Canvasid, ImageID, GridCountx, GridCounty, GridSpace, OffSetX, Offsety, Isanimat) {
var imagen = nueva imagen ();
var g = document.getElementById (CanvasId) .getContext ("2d");
var img = document.getElementById (imageId);
image.src = img.getAttribute ("src");
G.DrawImage (imagen, 0, 0);
var imagedata = g.getImagedata (0, 0, image.width, image.height);
var grid_width = imagedata.Width / GridCountx;
var grid_height = iMagedata.Height / GridCounty;
//Animación
if (isanimat) {
var x = 0,
y = 0;
var inter = setInterval (function () {
g.putimagedata (imagedata, 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): NULL;
} else {// no animación
para (var y = 0; y <gridCounty; y ++) {
para (var x = 0; x <gridCountx; x ++) {
g.putimagedata (imagedata, Gridspace * x + offsetX, Gridspace * y + offsety, grid_width * x, grid_height * y, grid_width, grid_height);
}
}
}
}
código HTML
La copia del código es la siguiente:
<Canvas id = "Canvas1"> Canvas Demo </Canvas>
<img id = "image1" style = "visual
Cómo usar:
La copia del código es la siguiente:
//p.ej...
ImageGrid ("Canvas1", "Image1", 3, 3, 2, 220, 0, verdadero); // 3*3
ImageGrid ("Canvas1", "Image1", 4, 4, 2, 440, 0, verdadero); // 4*4
ImageGrid ("Canvas1", "Image1", 3, 4, 2, 660, 0, falso); // 3*4
El código es muy conciso, pero el efecto es muy bueno. ¿Lo has aprendido?