JS 핵심 코드
코드 사본은 다음과 같습니다.
/*
*canvasid : HTML 캔버스 태그 ID
*ImageId : HTML IMG 태그 ID
*GRIDCOUNTX : X 축 사진 분할 번호
*gridcounty : y 축 이미지 세분화 수
*그리드 스페이스 : 그리드 공간
*offsetx : x*y 캔버스에 대한 x*y 그리드 (0, 0) x 좌표 오프셋
** Offsetx : x*y 캔버스에 대한 x*y 그리드 (0, 0) 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 (이미지, 0, 0);
var imagedata = g.getImageData (0, 0, image.width, image.height);
var grid_width = imagedata.width / gridCountX;
var grid_height = imageata.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
코드는 매우 간결하지만 그 효과는 매우 시원합니다. 배웠습니까?