03 canvas帧动画封装案例

Posted Nicole

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 = 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帧动画封装案例的主要内容，如果未能解决你的问题，请参考以下文章

最简单的序列帧动画canvas插件

canvas+js绘制序列帧动画

更改正在动画的精灵表时 HTML5 Canvas 挂起（逐帧播放视频）

案例 HTML5 Canvas流动线条动画特效

前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

源码案例一颗基于HTML5 Canvas的动画特效树