效果：
素材：
源码：（一般的绘制方式）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绘制序列帧动画</title> </head> <body> <canvas id="demo"></canvas> <button type="button" id="up">↑</button> <button type="button" id="right">→</button> <button type="button" id="down">↓</button> <button type="button" id="left">←</button> <script type="text/javascript"> (function () { var canvas = document.getElementById("demo"); var up = document.getElementById("up"); var right = document.getElementById("right"); var down = document.getElementById("down"); var left = document.getElementById("left"); //设置宽高不从css中设置 canvas.width = 200;//设置canvas宽 canvas.height = 200;//设置canvas高 canvas.style.border = "1px solid red"; //获取上下文 var ctx = canvas.getContext("2d"); //加载图片 var img = new Image(); img.src = "img/dh.png"; var frameIndex = 0,dirIndex = 0; up.onclick = function (ev) { dirIndex = 3; } right.onclick = function (ev) { dirIndex = 2; } down.onclick = function (ev) { dirIndex = 0; } left.onclick = function (ev) { dirIndex = 1; } img.onload = function () { setInterval(function () { //清除 之前的 图片墨迹。 ctx.clearRect(0,0,canvas.width,canvas.height); ctx.drawImage( img , frameIndex*40 //截取原始图片的 x坐标 , dirIndex*65 //截取原始图片的 y坐标 , 40 //截取原始图片的 宽度 , 65 // 截取的高度 , 20 //图片在canvas画布上的x坐标 , 20 //图片在canvas画布上的y坐标 , 80 //绘制图片的宽度 , 65 *2 //绘制图片的高度 ); frameIndex++;// 添加到下一帧 frameIndex %=4;// 取余数 7 %4 = 3 3%4 =3 4%4 =0 console.log(frameIndex); },100) } }()); </script> </body> </html>
源码：(面向对象的绘制方式)
Sprite.js
function Sprite(option) { this._init(option); } Sprite.prototype = { //初始化 imgsrc,frameIndex,dirIndex,originW,originH,x,y,w,fps _init:function (option) { this.img_src = option.img_src || "img/dh.png";//精灵图src this.framIndex = 0;//截取精灵图其实位置的X轴坐标 this.dirIndex = 0;//截取精灵图其实位置的Y轴坐标 this.originW = option.originW || 40;//截取精灵图的宽度 this.originH = option.originH || 65;//截取精灵图的高度 this.x = option.x || 20;//动画放置的原点X轴 this.y = option.y || 20;//动画放置的原点Y轴 this.w = option.w || 40*2;//动画的宽度 this.h = option.h || 65*2;//动画的高度 this.fps = option.fps || 10; // 动画绘制的帧数 }, //渲染动画 render:function (ctx) { var img = new Image(); img.src = this.img_src; var self = this; var frameIndex = this.framIndex; img.onload = function (ev) { setInterval(function () { ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); ctx.drawImage( img //绘制的原始图片 , frameIndex*self.originW //截取原始图片的 x坐标 , self.dirIndex*self.originH //截取原始图片的 y坐标 , self.originW //截取原始图片的 宽度 , self.originH // 截取的高度 , self.x //图片在canvas画布上的x坐标 , self.y //图片在canvas画布上的y坐标 , self.w //绘制图片的宽度 , self.h //绘制图片的高度 ) frameIndex++; frameIndex %= 4; },1000/self.fps) } }, //改变方向： changeDir:function (dir) { if( dir == 'left' ) { this.dirIndex = 1; } if( dir == 'right' ) { this.dirIndex = 2; } if( dir == 'up' ) { this.dirIndex = 3; } if( dir == 'down' ) { this.dirIndex = 0; } } }
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js面向对象绘制序列帧动画</title> <script type="text/javascript" src="js/Sprite.js"></script> </head> <body> <canvas id="canvas"></canvas> <button type="button" id="up">↑</button> <button type="button" id="right">→</button> <button type="button" id="down">↓</button> <button type="button" id="left">←</button> <script> var canvas = document.getElementById("canvas"); var up = document.getElementById("up"); var right = document.getElementById("right"); var down = document.getElementById("down"); var left = document.getElementById("left"); //设置宽高不从css中设置 canvas.width = 200;//设置canvas宽 canvas.height = 200;//设置canvas高 canvas.style.border = "1px solid red"; //获取上下文 var ctx = canvas.getContext("2d"); var s = new Sprite({ img_src:"img/dh.png" //绘制的原始图片 , originW:40 //截取原始图片的 宽度 , originH:65 // 截取的高度 , x:20 //图片在canvas画布上的x坐标 , y:20 //图片在canvas画布上的y坐标 , w:40*2 //绘制图片的宽度 , h:65*2 //绘制图片的高度 , fps:10 }); s.render(ctx);//渲染动画 up.onclick = function (ev) { s.changeDir("up"); } right.onclick = function (ev) { s.changeDir("right"); } down.onclick = function (ev) { s.changeDir("down"); } left.onclick = function (ev) { s.changeDir("left"); } </script> </body> </html>