JSコアコード
コードコピーは次のとおりです。
/*
*Canvasid：HTML CanvasタグID
*ImageID：HTML IMGタグID
*gridcountx：x軸画像セグメンテーション番号
*GridCounty：Y軸画像セグメンテーションの数
*グリッドスペース：グリッドスペース
*offsetx：x*y canvas（0、0）x座標オフセットに対するグリッド
** offsetx：x*y canvas（0、0）y座標オフセット
*ISANIMAT：アニメーションディスプレイを有効にするかどうか
*/
関数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（画像、0、0）;
var imagedata = g.getimagedata（0、0、image.width、image.height）;
var grid_width = imagedata.width / gridcountx;
var grid_height = imagedata.height / gridcounty;
//アニメーション
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、grid_height）;
x <gridcountx？ x ++：x = 0;
if（x == 0）{
y <gridcounty？ y ++：y = 0;
}
}、200）;
y == gridcounty？ ClearInterval（inter）：null;
} else {//非アニメーション
for（var y = 0; y <gridcounty; y ++）{
for（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コード
コードコピーは次のとおりです。
<canvas id = "canvas1"> canvas demo </canvas>
<img id = "image1" style = "display：none" src = "// files.vevb.com/file_images/article/201412/2014122894620636.jpg"/>
使い方：
コードコピーは次のとおりです。
//例えば...
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
コードは非常に簡潔ですが、効果は非常にクールです。あなたはそれを学びましたか？