Menggunakan kanvas javascript untuk mencipta kemahiran applet_javascript grid sembilan persegi

kod teras js

Salin kod Kod adalah seperti berikut:

/*
*canvasid:html id teg kanvas
*imageid:html img tag id
*gridcountX: Bilangan pembahagian imej paksi-x
*gridcountY: bilangan pembahagian imej paksi-y
*ruang grid:Ruang grid
*offsetX: x*y grid relatif kepada kanvas (0, 0) X koordinat mengimbangi
**offsetX: grid x*y relatif kepada kanvas (0, 0) koordinat Y mengimbangi
*isanimat: Sama ada untuk mendayakan paparan animasi
*/
fungsi ImageGrid(canvasid, imageid, gridcountX, gridcountY, gridspace, offsetX, offsetY, isanimat) {
imej var = Imej baharu();
var g = document.getElementById(canvasid).getContext("2d");
var img=document.getElementById(imageid);
Image.src=img.getAttribute("src");
g.drawImage(imej, 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
Jika (isanimat) {
      var x = 0,
          y = 0;
      var inter = setInterval(function() {
g.putImageData(data imej, ruang grid * x offsetX, gridspace * y offsetY, grid_width * x, grid_height * y, grid_width, grid_height);
               x < gridcountX ?                   jika (x == 0) {
              y < gridcountY ?             }
}, 200);
y == gridcountY ? clearInterval(antara) : null;
} lain { //Bukan animasi
untuk (var y = 0; y < gridcountY; y ) {
untuk (var x = 0; x < gridcountX; x ) {
g.putImageData(data imej, ruang grid * x offsetX, gridspace * y offsetY, grid_width * x, grid_height * y, grid_width, grid_height);
            }
}
}
}

kod html

Salin kod Kod adalah seperti berikut:

Tunjuk cara kanvas

Cara menggunakan:

Salin kod Kod adalah seperti berikut:

//cth...

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

Kod ini sangat mudah, tetapi kesannya sangat keren. Adakah anda telah mempelajarinya?