03 canvas幀動畫封裝案例
阿新 • • 發佈：2017-07-16
onclick width tel frame wid class () wim code
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 = 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幀動畫封裝案例