JavaScript キャンバスを使用して 9 マスのグリッドを作成するアプレット

JavaScript キャンバスを使用して 9 マスのグリッドを作成するアプレット_JavaScript スキル

WBOY

リリース： 2016-05-16 16:24:02

オリジナル

1993 人が閲覧しました

js コアコード

/*

*canvasid:htmlキャンバスタグID

*imageid:html 画像タグ ID

*gridcountX: x 軸画像の分割数

*gridcountY: y 軸画像の分割数

*gridspace:グリッド空間

*offsetX: キャンバス (0, 0) を基準とした x*y グリッドの X 座標オフセット 

**offsetX: キャンバス (0, 0) を基準とした x*y グリッドの Y 座標オフセット 

*isanimat: アニメーション表示を有効にするかどうか

*/

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);

vargrid_width = imagedata.width /gridcountX;

var Grid_height = imagedata.height / グリッドカウント Y;

//アニメーション

If (isanimat) {

var x = 0,

y = 0;

var inter = setInterval(function() {

g.putImageData(画像データ, グリッドスペース * x オフセット X, グリッドスペース * y オフセット Y, グリッド幅 * x, グリッド高さ * y, グリッド幅, グリッド高さ);

x 

if (x == 0) {

y 
}

}, 200);

y == グリッドカウント Y ?clearInterval(inter) : null;

} else { //非アニメーション

for (var y = 0; y 
for (var x = 0; x 
g.putImageData(画像データ, グリッドスペース * x オフセット X, グリッドスペース * y オフセット Y, グリッド幅 * x, グリッド高さ * y, グリッド幅, グリッド高さ);

}

}

}

}

HTML コード

コードをコピーしますコードは次のとおりです:

使用方法:

コードをコピーしますコードは次のとおりです:

//例...

ImageGrid("canvas1", "image1", 3, 3, 2, 220, 0, true);
ImageGrid("canvas1", "image1", 4, 4, 2, 440, 0, true);
ImageGrid("canvas1", "image1", 3, 4, 2, 660, 0, false);

コードはとてもシンプルですが、効果はとてもクールです。もう覚えましたか?