JS -Kerncode
Die Codekopie lautet wie folgt:
/*
*Canvasid: HTML Canvas Tag -ID
*ImageId: HTML IMG -Tag -ID
*GridCountx: X-Achse Bildsegmentierungsnummer
*Gridcounty: Die Anzahl der Y-A-Achse-Bildsegmentierung
*Gridspace: Gitterraum
*OffsetX: x*y Gitter relativ zu Leinwand (0, 0) X -Koordinatenversatz
** OffsetX: x*y Gitter in Bezug auf Leinwand (0, 0) y Koordinatenversatz
*Isanimat: Ob die Animationsanzeige aktiviert werden soll
*/
Funktionsmagergrid (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 (Bild, 0, 0);
var imagedata = g.getImagedata (0, 0, Bild.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 + 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 {// Nichtanimation
für (var y = 0; y <gridcounty; y ++) {
für (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 -Code
Die Codekopie lautet wie folgt:
<Canvas id = "Canvas1"> Canvas -Demo </canvas>
<img id = "image1" style = "display: keine" src = "// files.vevb.com/file_images/article/201412/2014122894620636.jpg"/>
Wie man verwendet:
Die Codekopie lautet wie folgt:
//z.B...
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
Der Code ist sehr präzise, aber der Effekt ist sehr cool. Hast du es gelernt?