자바스크립트 캔버스를 사용하여 9각형 그리드 만들기 applet_javascript 기술

js 핵심 코드

코드 복사 코드는 다음과 같습니다.

/*
*canvasid:html 캔버스 태그 ID
*imageid:html img 태그 ID
*gridcountX: X축 이미지 분할 개수
*gridcountY : y축 이미지 분할 개수
*gridspace:그리드 공간
*offsetX: 캔버스를 기준으로 한 x*y 그리드(0, 0) X 좌표 오프셋
**offsetX: 캔버스를 기준으로 한 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);
vargrid_width = imagedata.width /gridcountX;
vargrid_height=imagedata.height/gridcountY;
//애니메이션
만약 (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 ==gridcountY ?clearInterval(inter): null;
} else { //애니메이션이 아님
for (var y = 0; y for (var x = 0; x g.putImageData(이미지데이터, 그리드스페이스 * x 오프셋X, 그리드스페이스 * y 오프셋Y, 그리드_폭 * x, 그리드_높이 * y, 그리드_폭, 그리드_높이);
            }
}
}
}

HTML 코드

코드 복사 코드는 다음과 같습니다.

캔버스 데모

사용방법:

코드 복사 코드는 다음과 같습니다.

//예를 들어...
ImageGrid("캔버스1", "이미지1", 3, 3, 2, 220, 0, true) //3*3
ImageGrid("캔버스1", "이미지1", 4, 4, 2, 440, 0, true); //4*4
ImageGrid("캔버스1", "이미지1", 3, 4, 2, 660, 0, false) //3*4

코드는 매우 간단하지만 효과는 매우 멋집니다.