주석 : 먼저, 연속 프레임이있는 그림을 준비한 다음 HTML5 Canvas의 드로우 방법을 사용하여 다른 시간 간격으로 다른 프레임을 그립니다. 이런 식으로 애니메이션이 재생되는 것처럼 보입니다. 주요 기술 포인트와 예제 코드는 다음과 같습니다. 관심있는 친구들이 그것을 언급 할 수 있습니다. 모든 사람에게 도움이되기를 바랍니다.
HTML5 캔버스 애니메이션 효과 데모주요 아이디어 :
먼저 연속 프레임이있는 그림을 준비한 다음 HTML5 Canvas의 드로우 방법을 사용하여 다른 시간 간격으로 다른 프레임을 그려서 애니메이션이 재생되는 것처럼 보입니다.
주요 기술 포인트 :
JavaScript 함수 settimeout ()에는 두 개의 매개 변수가 있습니다. 첫 번째는 매개 변수가 JavaScript 메소드를 전달할 수 있다는 것입니다.
다른 매개 변수는 중간 시간을 밀리 초 단위로 나타냅니다. Code example:
settimeout (업데이트, 1000/30);
Canvas의 API-DRAWIMAGE () 메소드는 모든 9 가지 매개 변수가 필요합니다.
ctx.DrawImage (myimage, offw, offh, 너비, 높이, x2, y2, 너비, 높이);
여기서 OFFW 및 Offh 소스 이미지의 시작 좌표 지점, 너비 및 높이는 소스 이미지의 너비와 높이, x2 및 y2 테이블을 나타냅니다.
대상 캔버스에서 소스 이미지의 시작 좌표 지점을 보여줍니다.
22 프레임 야생 거위 비행 사진의 효과 :
소스 이미지 :
프로그램 코드 :
<! doctype html>
<html>
<헤드>
<meta http-equiv = "x-ua 호환"내용 = "chrome = ie8">
<meta http-equiv = "content-type"content = "text/html; charset = utf-8">
<title> 캔버스 마우스 이벤트 데모 </title>
<link href = "default.css" />
<cript>
var ctx = null; // 글로벌 변수 2D 컨텍스트
var 시작 = 거짓;
var mtext_canvas = null;
var x = 0, y = 0;
var 프레임 = 0; // 22 5*5 + 2
var imageReady = false;
var myimage = null;
var px = 300;
var py = 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 호환 브라우저를 설치하십시오.");
반품;
}
// 캔버스의 2D 컨텍스트를 얻고 사각형을 그립니다
ctx = canvas.getContext ( "2d");
ctx.fillstyle = "black";
ctx.fillRect (0, 0, canvas.width, canvas.height);
myimage = document.createElement ( 'IMG');
myimage.src = "../robin.png";
myimage.onload = loaded ();
}
함수로드 () {
imageReady = true;
settimeout (업데이트, 1000/30);
}
함수 redraw () {
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 (프레임 / 5);
var col = 프레임 - 행 * 5;
var offw = col * 너비;
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 (속도 * 높이);
ctx.DrawImage (myimage, offw, offh, 너비, 높이, px, py, 너비, 높이);
// 두 번째 로빈
x2 = x2-5;
Y2 = Y2 + 5;
if (x2 <-50) {
x2 = 300;
Y2 = 0;
}
ctx.DrawImage (myimage, offw, offh, 너비, 높이, x2, y2, 너비, 높이);
}
함수 업데이트 () {
redraw ();
프레임 ++;
if (frame> = 22) 프레임 = 0;
settimeout (업데이트, 1000/30);
}
</스크립트>
</head>
<body>
<H1> HTML 캔버스 애니메이션 데모 -Gloomy Fish </h1>
<fre> 애니메이션 재생 </pre>
<div>
<canvas> </canvas>
</div>
</body>
</html>
투명한 PNG 형식을 업로드하는 데 문제가 있다는 것을 알았으므로 불투명 한 사진을 업로드했습니다. 다른 사진으로 교체 할 수 있습니다. 교체 후 최대 프레임 수를 22에서 실제 프레임 수로 수정하십시오.