Javascript+canvas making Nine program _javascript skills

JS Core Code

Copy Code code as follows:

/*
*canvasid:html Canvas Tag ID
*imageid:html img Tag ID
*gridcountx:x axis Picture Split number
*gridcounty:y axis Picture Split number
*gridspace: Sudoku Gap
*offsetx:x*y Sudoku Relative Canvas (0,0) x coordinate offset
**offsetx:x*y Sudoku Relative canvas (0,0) y-coordinate offset
*isanimat: Animate display is enabled
*/
function 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
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, G Rid_height);
x < Gridcountx? X + +: × = 0;
if (x = = 0) {
Y < Gridcounty? y++: y = 0;
}
}, 200);
y = = Gridcounty? Clearinterval (inter): null;
else {//non-animation
for (var y = 0; y < Gridcounty; y++) {
for (var x = 0; x < Gridcountx + +) {
G.putimagedata (ImageData, Gridspace * x + OffsetX, Gridspace * y + offsetY, grid_width * x, Grid_height * y, Grid_width, G Rid_height);
}
}
}
}

HTML code

Copy Code code as follows:

<canvas id= "CANVAS1" width= "900px" height= "550px" >canvas demo</canvas>

How to use:

Copy Code code as follows:

eg..
Imagegrid ("Canvas1", "Image1", 3, 3, 2,, 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

The code is very concise, the effect is very cool, the small friends have learned?