效果：
素材：
源碼：（一般的繪制方式）
<!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>