JS Core Code
Кода -копия выглядит следующим образом:
/*
*Canvasid: идентификатор тега HTML Canvas
*ImageID: HTML IMG TAG ID
*gridCountx: x-ось. Номер сегментации изображений
*Gridcounty: количество сегментации изображения оси y
*Gridspace: сетка
*Offsetx: x*y сетка относительно холста (0, 0) x Смещение координат
** Offsetx: x*y сетка по сравнению с холстом (0, 0) y координата смещение
*Исанимат: включить анимационный дисплей
*/
Функция 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 (изображение, 0, 0);
var ImageData = g.getimagedata (0, 0, image.width, image.height);
var grid_width = imagedata.width / gridcountx;
var grid_height = imagedata.height / gridcounty;
//Анимация
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 {// не анимация
for (var y = 0; y <gridcounty; y ++) {
for (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);
}
}
}
}
HTML -код
Кода -копия выглядит следующим образом:
<canvas id = "canvas1"> canvas demo </canvas>
<img id = "image1" style = "Display: none" src = "// files.vevb.com/file_images/article/201412/2014122894620636.jpg"/>
Как использовать:
Кода -копия выглядит следующим образом:
//например...
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
Код очень краткий, но эффект очень крутой. Вы узнали это?