首先要准备一张有连续帧的图片，然后利用HTML5 Canvas的绘制方法在不同的时间间隔替换不同的帧，这样看起来就像动画在播放，关键技术点及实例代码如下，关注的朋友可以参考下哈，希望对大家有所帮助
HTML5画布效果动画_ECSHOP演示
主要思想：
首先要准备一张有连续帧的图片，然后利用HTML5画布的绘制方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。
关键技术点：
JavaScript的函数的setTimeout（）有两个参数，第一个是参数可以传递一个JavaScript的方法，
另外一个参数代表间隔时间，单位为毫秒数代码示例：
setTimeout的（更新，1000至1030年）;
Canvas的API-drawImage（）方法，需要指定全部9个参数：
ctx.drawImage（myImage，offw，offh，宽度，高度，x2，y2，宽度，高度）；
其中offw，offh是指源图像的开始坐标点，宽度，高度表示源图像的宽与高，X2，Y2表
示源图像在目标画布上的起始坐标点。
一个22帧的大雁飞行图片实现的效果：
源图像：
程序代码：
复制代码
代码如下：
<！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>画布鼠标事件演示</ title>
<link href =” default.css“ rel =” stylesheet“ />
<script>
var ctx = null; //全局变量2d上下文
var starts = 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;
窗户。
var canvas = document.getElementById（“ animation_canvas”）;
console.log（canvas.parentNode.clientWidth）;
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
如果（！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（）;
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（frame / 5）;
var col = frame-row * 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 =（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）;
//第二个知更鸟
x2 = x2-5;
y2 = y2 + 5;
if（x2 <-50）{
x2 = 300;
y2 = 0;
}
ctx.drawImage（myImage，offw，offh，width，height，x2，y2，width，height）;
}
函数update（）{
redraw（）;
框架++;
如果（frame> = 22）frame = 0;
setTimeout（更新，1000/30）;
}
</ script>
</ head>
<body>
<h1> HTML Canvas动画演示-通过Gloomy Fish </ h1>
<pre>播放动画</ pre>
<div id =“ my_painter”>
<canvas id =“ animation_canvas”> </ canvas>
</ div>
</ body>
</ html>
发现上传透明PNG格式有点问题，所以我上传不透明的图片。可以用其他图片替换，替换以后请修改最大帧数从22到您的实际帧数即可运行。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
HTML