รหัสแกน JS
การคัดลอกรหัสมีดังนี้:
-
*CANVASID: HTML CANVAS TAG ID
*ImageId: HTML IMG TAG ID
*gridcountx: หมายเลขการแบ่งส่วนรูปภาพแกน x
*GridCounty: จำนวนการแบ่งส่วนภาพแกน y
*gridspace: พื้นที่กริด
*Offsetx: x*y กริดสัมพันธ์กับผืนผ้าใบ (0, 0) x ประสานงานออฟเซ็ต
** Offsetx: x*y กริดสัมพันธ์กับผืนผ้าใบ (0, 0) y ประสานงานการชดเชย
*isanimat: จะเปิดใช้งานการแสดงภาพเคลื่อนไหว
-
ฟังก์ชั่น ImageGrid (Canvasid, ImageId, gridcountx, gridcounty, gridspace, Offsetx, Offsety, isanimat) {
ภาพ var = ภาพใหม่ ();
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 (ฟังก์ชัน () {
g.putimagedata (imagedata, gridspace * x + Offsetx, gridspace * y + ropsety, grid_width * x, grid_height * y, grid_width, grid_height);
x <gridcountx? x ++: x = 0;
ถ้า (x == 0) {
y <gridcounty? y ++: y = 0;
-
}, 200);
y == gridcounty? ClearInterval (inter): null;
} else {// ไม่ใช่แอนิเมชั่น
สำหรับ (var y = 0; y <gridcounty; y ++) {
สำหรับ (var x = 0; x <gridcountx; x ++) {
g.putimagedata (imagedata, gridspace * x + Offsetx, gridspace * y + ropsety, grid_width * x, grid_height * y, grid_width, grid_height);
-
-
-
-
รหัส HTML
การคัดลอกรหัสมีดังนี้:
<canvas id = "Canvas1"> Demo Canvas </anvas>
<img id = "image1" style = "display: none" src = "// files.vevb.com/file_images/article/201412/20141222894620636.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
รหัสมีความรัดกุมมาก แต่เอฟเฟกต์นั้นเจ๋งมาก คุณได้เรียนรู้แล้วหรือยัง?