Utiliser un canevas javascript pour créer une grille à neuf carrés applet_javascript skills

code de base js

Copier le code Le code est le suivant :

/*
*canvasid : identifiant de la balise HTML Canvas
*imageid : identifiant de la balise html img
*gridcountX : Nombre de divisions d'image sur l'axe X
*gridcountY : nombre de divisions d'image sur l'axe y
*gridspace : Espace de grille
*offsetX : grille x*y par rapport au canevas (0, 0) Décalage des coordonnées X
**offsetX : grille x*y par rapport au canevas (0, 0) Décalage des coordonnées Y
*isanimat : s'il faut activer l'affichage de l'animation
*/
function ImageGrid(canvasid, imageid, gridcountX, gridcountY, gridspace, offsetX, offsetY, isanimat) {
var image = nouvelle 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 grille_width = imagedata.width / gridcountX;
var grille_hauteur = imagedata.hauteur / grillecountY;
//Animation
Si (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 <                   si (x == 0) {
              y < nombre de grillesY ? : y = 0;
            }
}, 200);
y == nombregrilleY ? clearInterval(inter) : null;
} else { //Non animé
pour (var y = 0; y < gridcountY; y ) {
pour (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);
            }
>
>
>

code html

Copier le code Le code est le suivant :

Démo de toile

Comment utiliser :

Copier le code Le code est le suivant :

//par exemple...
ImageGrid("canvas1", "image1", 3, 3, 2, 220, 0, vrai //3*3
); ImageGrid("canvas1", "image1", 4, 4, 2, 440, 0, vrai //4*4
); ImageGrid("canvas1", "image1", 3, 4, 2, 660, 0, false //3*4
);

Le code est très simple, mais l'effet est très cool L'avez-vous appris ?