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

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


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