HTML5用canvas怎么实现动画效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5用canvas怎么实现动画效果相关的知识，希望对你有一定的参考价值。
参考技术A 主要思想：首先要准备一张有连续帧的图片，然后利用html5
Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。
关键技术点：
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表
示源图像在目标Canvas上的起始坐标点。
<!DOCTYPE
html>
<html>
<head>
<meta
http-equiv="X-UA-Compatible"
content="chrome=IE8">
<meta
http-equiv="Content-type"
content="text/html;charset=UTF-8">
<title>Canvas
Mouse
Event
Demo</title>
<link
href="default.css"
rel="stylesheet"
/>
<script>
var
ctx
=
null;
//
global
variable
2d
context
var
started
=
false;
var
mText_canvas
=
null;
var
x
=
0,
y
=0;
var
frame
=
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("Canvas
not
supported.
Please
install
a
HTML5
compatible
browser.");
return;
//
get
2D
context
of
canvas
and
draw
rectangel
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();
function
loaded()
imageReady
=
true;
setTimeout(
update,
1000/30);
function
redraw()
ctx.clearRect(0,
0,
460,
460)
ctx.fillStyle="black";
ctx.fillRect(0,
0,
460,
460);
//
find
the
index
of
frames
in
image
var
height
=
myImage.naturalHeight/5;
var
width
=
myImage.naturalWidth/5;
var
row
=
Math.floor(frame
/
5);
var
col
=
frame
-
row
*
5;
var
offw
=
col
*
width;
var
offh
=
row
*
height;
//
first
robin
px
=
px
-
5;
py
=
py
-
5;
if(px
<
-50)
px
=
300;
if(py
<
-50)
py
=
300;
//var
rate
=
(frame+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);
//
second
robin
x2
=
x2
-
5;
y2
=
y2
+
5;
if(x2
<
-50)
x2
=
300;
y2
=
0;
ctx.drawImage(myImage,
offw,
offh,
width,
height,
x2,
y2,
width,
height);
function
update()
redraw();
frame++;
if
(frame
>=
22)
frame
=
0;
setTimeout(
update,
1000/30);
</script>
</head>
<body>
<h1>HTML
Canvas
Animations
Demo
-
By
Gloomy
Fish</h1>
<pre>Play
Animations</pre>
<div
id="my_painter">
<canvas
id="animation_canvas"></canvas>
</div>
</body>
</html>
怎么设置canvas动画为背景
参考技术A 使用HTML5画布canvas能够快速实现简单的动画效果，基本原理如下：每隔一定时间绘制图形并且清除图形，用来模拟出一个动画过程，可以使用context.clearRect(0, 0, x, y)方法来刷新需要绘制的图形首先是绘制图形的方法，如下：<pre t="code" l="java">function myAnimation()ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);
if (x_icon < 0 || x_icon > canvas_size_x - size_x)
stepX = -stepX;
if (y_icon < 0 || y_icon > canvas_size_y - size_y)
stepY = -stepY;
x_icon += stepX;
y_icon += stepY;
ctx.drawImage(anim_img, x_icon, y_icon);
以上方法每隔一定时间清除画布内容，并且重新计算绘制图形位置，一旦超过了画布大小，则反转坐标绘制图形。本回答被提问者采纳
以上是关于HTML5用canvas怎么实现动画效果的主要内容，如果未能解决你的问题，请参考以下文章
[js高手之路]html5 canvas动画教程 - 下雪效果