애니메이션 효과를 만드는 HTML5 캔버스 그리기 방법 example_html5 튜토리얼 기술
canvas
draw
생기
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);
HTML 캔버스 애니메이션 데모 Gloomy Fish
애니메이션 재생