JS CORE CODE
نسخة الكود كما يلي:
/*
*canvasid: HTML Canvas TAG ID
*ImageId: HTML IMG TAG ID
*GridCountx: رقم تجزئة الصور المحور X
*GridCounty: عدد تجزئة صور المحور Y
*مساحة الشبكة: مساحة الشبكة
*OffsetX: x*y شبكة نسبة إلى قماش (0 ، 0) x الإزاحة
** OffsetX: x*y شبكة نسبة إلى قماش (0 ، 0) y الإزاحة
*isanimat: ما إذا كان لتمكين عرض الرسوم المتحركة
*/
وظيفة ImageGrid (canvasid ، imageId ، GridCountX ، GridCounty ، Gridspace ، OffsetX ، Offety ، 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 ؛
// الرسوم المتحركة
إذا (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 ؛
} آخر {// عدمايه
لـ (var y = 0 ؛ y <gridCounty ؛ y ++) {
لـ (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 </tanvas>
<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
الكود موجز للغاية ، لكن التأثير رائع للغاية. هل تعلمت ذلك؟