JS Core Code
Salinan kode adalah sebagai berikut:
/*
*Canvasid: HTML Canvas Tag ID
*ImageId: HTML IMG Tag ID
*GridCountX: nomor segmentasi gambar sumbu x
*GridCounty: Jumlah segmentasi gambar sumbu y
*Gridspace: Space Grid
*offsetx: x*y grid relatif terhadap kanvas (0, 0) x Offset Koordinat
** Offsetx: x*y grid relatif terhadap kanvas (0, 0) y Offset Koordinat
*isanimat: apakah akan mengaktifkan tampilan animasi
*/
Fungsi ImageGrid (Canvasid, ImageID, GridCountX, GridCounty, Gridspace, OffsetX, Offsety, Isanimat) {
gambar var = gambar baru ();
var g = document.getElementById (canvasid) .getContext ("2d");
var img = document.getElementById (ImageId);
image.src = img.getAttribute ("src");
G.DrawImage (gambar, 0, 0);
var Imagedata = g.getImagedata (0, 0, Image.width, Image.height);
var grid_width = imagedata.width / gridcountx;
var grid_height = imagedata.height / gridcounty;
// Animasi
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 {// non-animasi
untuk (var y = 0; y <gridcounty; y ++) {
untuk (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);
}
}
}
}
Kode HTML
Salinan kode adalah sebagai berikut:
<Canvas ID = "Canvas1"> Demo Canvas </Canvas>
<img id = "image1" style = "display: none" src = "// file.vevb.com/file_images/article/201412/2014122894620636.jpg"/>
Bagaimana menggunakan:
Salinan kode adalah sebagai berikut:
//misalnya...
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
Kode ini sangat ringkas, tetapi efeknya sangat keren. Sudahkah Anda mempelajarinya?