首页 > 代码库 > 03 canvas帧动画封装案例
03 canvas帧动画封装案例
sprite.js
/** * Created by suxiaoxia on 2017/7/15. */ function sprite(option) { this._init(option); } sprite.prototype = { /*初始化*/ _init:function (option) { this.x = option.x || 0; this.y = option.y || 0; this.w = option.w || 40; this.h = option.h || 65; this.fps = option.fps || 10; this.originW = option.originW || 40; this.originH = option.originH || 65; this._dirIndex = 0; this._imgSrc = http://www.mamicode.com/option.imgSrc || ‘‘; }, render:function (ctx) { var img = new Image(); img.src = this._imgSrc; var self = this; img.onload = function () { var frameIndex = 0; setInterval(function () { ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); ctx.drawImage( img, frameIndex*self.originW, self._dirIndex*self.originH, self.originW, self.originH, self.x, self.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
<head> <meta charset="UTF-8"> <title>Title</title> //引入sprite.js文件 <script src="sprite.js"></script> </head> <body> <div> <canvas id="canvas"> 你的浏览器不支持canvas,请升级浏览器 </canvas> </div> <button id="btn-dir-left">←</button> <button id="btn-dir-right">→</button> <button id="btn-dir-up">↑</button> <button id="btn-dir-down">↓</button> <script> (function () { var canvas = document.querySelector("#canvas"); var ctx = canvas.getContext(‘2d‘); canvas.width = 600; canvas.height = 600; canvas.style.border = "1px solid #000"; var s = new sprite({ x:300, y:300, w:80, h:65*2, fps:4, originW:40, originH:65, imgSrc:‘../img_a/DMMban.png‘ }); s.render(ctx); //绑定按钮的点击事件 var btnLeft = document.getElementById(‘btn-dir-left‘); btnLeft.onclick = function() { s.changeDir(‘left‘); }; var btnRight = document.getElementById(‘btn-dir-right‘); btnRight.onclick = function() { s.changeDir(‘right‘); }; var btnUp = document.getElementById("btn-dir-up"); btnUp.onclick = function() { s.changeDir(‘up‘); }; var btnDown = document.getElementById(‘btn-dir-down‘); btnDown.onclick = function() { s.changeDir(‘down‘); }; })(); </script> </body>
03 canvas帧动画封装案例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。