canvas+js绘制序列帧动画

Posted 2021-01-23 xxcxxc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas+js绘制序列帧动画相关的知识，希望对你有一定的参考价值。

效果：

素材：

源码：（一般的绘制方式）

<!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>

以上是关于canvas+js绘制序列帧动画的主要内容，如果未能解决你的问题，请参考以下文章

Canvas 动画原理与 fabric 实现

自己定义View时，用到Paint Canvas的一些温故，简单的帧动画（动画一，"掏粪男孩Gif"顺便再提提onWindowFocusChanged）(代码片段