애니메이션 효과를 만드는 HTML5 캔버스 그리기 방법 example_html5 튜토리얼 기술
WBOY
풀어 주다： 2016-05-16 15:49:19
원래의
1674명이 탐색했습니다.
HTML5 Canvas 애니메이션 효과 시연 주요 아이디어: 먼저 연속 프레임이 있는 그림을 준비한 다음 HTML5 Canvas의 그리기 방법을 사용하여 서로 다른 시간 간격으로 서로 다른 프레임을 그립니다. 애니메이션이 재생되는 것 같아요. 핵심 기술 포인트: JavaScript 함수 setTimeout()에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 JavaScript 메소드에 전달될 수 있습니다. 다른 매개변수는 밀리초 단위의 간격을 나타냅니다. . 코드 예: setTimeout( update, 1000/30); Canvas의 API-drawImage() 메서드에는 9개의 매개변수를 모두 지정해야 합니다. ctx.drawImage(myImage, offw, offh, width,height , x2 , y2, width, height) 여기서 offw, offh는 원본 이미지의 시작 좌표점을 나타내고, width, height는 원본 이미지의 너비와 높이를 나타내며, x2, y2는 의 위치를 나타냅니다. 대상의 소스 이미지 캔버스의 시작 좌표점입니다. 22프레임 기러기 비행 사진의 효과: 원본 이미지: 프로그램 코드:
코드 복사
코드는 다음과 같습니다.
캔버스 마우스 이벤트 데모
< ;script> var ctx = null; // 전역 변수 2d 컨텍스트 var selected = false var x = 0, y =0; = 0; // 22 5*5 2 var imageReady = false; var px = 300; var x2 = 300; var y2 = 0; window.onload = function() { var canvas = document.getElementById("animation_canvas") console.log(canvas.parentNode.clientWidth); >canvas.width = canvas.parentNode.clientWidth; canvas.height = canvas.parentNode.clientHeight; if (!canvas.getContext) { console.log("캔버스는 지원되지 않습니다. HTML5 호환 브라우저." ); return; } // 캔버스의 2D 컨텍스트를 가져오고 직사각형을 그립니다. ctx = canvas.getContext("2d"); ctx.fillStyle= "검은색"; ctx.fillRect(0, 0, canvas.width, canvas.height); myImage = document.createElement('img') myImage.src = "../robin .png"; myImage.onload = 로드됨(); } 함수 로드됨() { imageReady = true; setTimeout( 업데이트, 1000/30); } 함수 다시 그리기() { ctx.clearRect(0, 0, 460, 460) ctx.fillStyle="black" ctx.fillRect(0, 0, 460, 460); // 이미지에서 프레임 인덱스 찾기 var height = myImage.naturalHeight/5 var width = myImage.naturalWidth/5 var row = Math.floor(frame / 5) ; var col = 프레임 - 행 * 5; var offw = col * width; var offh = 행 * 높이 // px = px - 5; 🎜>py = py - 5; if(px < -50) { px = 300; } if(py < -50) { py = 300; } //var rate = (프레임 1) /22; //var rw = Math.floor(rate * width) //var rh = Math.floor(rate * height); ctx.drawImage(myImage, offw, offh, width, height, px, py, width, height) // 두 번째 로빈 x2 - y2 = y2 5; if(x2 < -50) { x2 = 300; y2 = 0 } ctx.drawImage(myImage, offw, offh, 너비, 높이, x2, y2, 너비, 높이); } function update() { redraw() frame if (frame >= 22) setTimeout( 업데이트, 1000/30);
