JavaScript Canvas nine Gongge applet

JS Core Code

1 /*2 *canvasid:html canvas Tag ID3 *imageid:html img Tag ID4 *gridcountx:x Axis Picture Division number5 *gridcounty:y Axis Picture Division number6 *gridspace: Gongge Gap7 *offsetx:x*y Gongge relative to canvas (0,0) x-coordinate offset8 **offsetx:x*y Gongge relative canvas (0,0) y-coordinate offset9 *isanimat: Whether animated display is enabledTen  */ One functionImagegrid (Canvasid, imageID, Gridcountx, Gridcounty, Gridspace, OffsetX, OffsetY, Isanimat) { A     varImage =NewImage (); -     varg = document.getElementById (Canvasid). GetContext ("2d"); -     varimg=document.getElementById (imageID); theImage.src=img.getattribute ("src"); -G.drawimage (image, 0, 0); -     varImageData = g.getimagedata (0, 0, Image.width, image.height); -     varGrid_width = imagedata.width/Gridcountx; +     varGrid_height = imagedata.height/Gridcounty; -     //Animation +     if(Isanimat) { A         varx = 0, aty = 0; -         varInter = 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++: y = 0; in             } -}, 200); toy = = Gridcounty? Clearinterval (Inter):NULL; +}Else{//Non-animated -          for(vary = 0; Y < Gridcounty; y++) { the              for(varx = 0; x < Gridcountx; X + +) { *G.putimagedata (ImageData, Gridspace * x + OffsetX, Gridspace * y + offsetY, grid_width * x, Grid_height *y, Grid_width, grid_height); $             }Panax Notoginseng         } -     } the}

View Code

Http://files.cnblogs.com/veiny/image_grid.xml

Download the XML file suffix name to HTML and open the browser to watch.

JavaScript Canvas nine Gongge applet