Verwenden Sie Javascript Canvas, um ein neunquadratisches Raster zu erstellen. applet_javascript-Fähigkeiten

JS-Kerncode

Code kopieren Der Code lautet wie folgt:

/*
*canvasid:html Canvas-Tag-ID
*imageid:html img tag id
*gridcountX: Anzahl der x-Achsen-Bildteilungen
*gridcountY: Anzahl der y-Achsen-Bildteilungen
*gridspace:Gitterraum
*offsetX: x*y-Raster relativ zur Leinwand (0, 0) X-Koordinatenoffset
**offsetX: x*y-Raster relativ zur Leinwand (0, 0) Y-Koordinatenversatz
*isanimat: Ob die Animationsanzeige aktiviert werden soll
*/
Funktion 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(image, 0, 0);
var imagedata = g.getImageData(0, 0, image.width, image.height);
var Grid_width = imagedata.width / GridcountX;
var Grid_height = imagedata.height / GridcountY;
//Animation
Wenn (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 = 0;
                  if (x == 0) {
              y < GridcountY : y = 0;
            }
}, 200);
y == GridcountY ? clearInterval(inter) : null;
} else { //Nicht animiert
for (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

Code kopieren Der Code lautet wie folgt:

Canvas-Demo

Anwendung:

Code kopieren Der Code lautet wie folgt:

//zB...
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 einfach, aber der Effekt ist sehr cool. Habt ihr ihn gelernt?