Canvas 帧动画(封装成对象),绘制图片(drawImage())

原创 2018年04月15日 13:14:33


person.js(封装的外部JS文件):

(function( w ) {
    
    // 混入式继承( copy继承 )
    function extend( o1, o2 ) {
        for ( var key in o2 ) {
            if ( o2.hasOwnProperty( key ) ) {
                o1[ key ] = o2[ key ];
            }
        }
    }

    /*
     * constructor { Person } 人构造函数
     * param { ctx: Context } 绘制环境
     * param { img: Image } 绘制的图像
     * param { widthFrame: number } 图像一排有多少个人
     * param { heightFrame: number } 图像一列有多少个人
     * param { x: number } 指定人物绘制的x轴坐标
     * param { y: number } 指定人物绘制的y轴坐标
     * param { renderWidth: number } 人物绘制时的宽
     * param { renderHeight: number } 人物绘制时的高
     * param { speed: number } 人物行走的速度
     * */
    function Person( ctx, img, widthFrame, heightFrame, x, y, renderWidth, renderHeight, speed ) {

        this.ctx = ctx;
        this.img = img;
        this.widthFrame = widthFrame;
        this.heightFrame = heightFrame;

        // 图像绘制时的坐标和大小
        this.x = x;
        this.y = y;
        this.renderWidth = renderWidth;
        this.renderHeight = renderHeight;

        // 行走的速度
        this.speed = speed || 5;

        // 求一个人的宽和高
        this.width = this.img.width / this.widthFrame;
        this.height = this.img.height / this.heightFrame;

        // 当前绘制某个方向的第几帧
        this.currentFrame = 0;

        // 当前行走的方向,默认是第一排的方向
        this.direction = 0;

        // 绑定事件
        this._bind();
    }

// 给原型扩充方法
    extend( Person.prototype, {

        // 绘制方法
        draw: function() {

            this.ctx.drawImage( this.img,
                this.width * this.currentFrame, this.height * this.direction, this.width, this.height,
                this.x, this.y, this.renderWidth, this.renderHeight);

        },

        // 绑定事件
        _bind: function() {

            var self = this;

            document.addEventListener( 'keydown', function( e ) {

                // 根据按键切换行走方向
                switch ( e.keyCode ) {
                    case 37:
                        self.direction = 1;
                        break;
                    case 38:
                        self.direction = 3;
                        break;
                    case 39:
                        self.direction = 2;
                        break;
                    case 40:
                        self.direction = 0;
                        break;
                }

            } );
        },

        // 更新小人下一阵绘制时的数据
        update: function() {

            switch ( this.direction ) {

                // 向下走,y轴加
                // 当小人向下出画布,那么从上边再走出来
                case 0:
                    this.y += this.speed;
                    this.y = this.y > this.ctx.canvas.height? -this.height: this.y;
                    break;

                // 向左走,x轴减
                // 当小人向左走出画布,那么从右边再走出来
                case 1:
                    this.x -= this.speed;
                    this.x = this.x < -this.width? this.ctx.canvas.width: this.x;
                    break;

                // 向右走,x轴加
                // 当小人向右走出画布,那么从左边再走出来
                case 2:
                    this.x += this.speed;
                    this.x = this.x > this.ctx.canvas.width? -this.width: this.x;
                    break;

                // 向上走,y轴减
                // 当小人向上出画布,那么从下边再走出来
                case 3:
                    this.y -= this.speed;
                    this.y = this.y < -this.height? this.ctx.canvas.height: this.y;
                    break;
            }

        }

    } );

    // 对外暴露Person
    w.Person = Person;

}( window ));


demo.html(利用person.js实现帧动画):
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border:1px solid red;
        }
        img {
            display: none;  /* 隐藏img标签,让图像在canvas画布上显示 */
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <img src="./imgs/NPC5.png">
    <script src="person.js"></script>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');
        var img = document.querySelector('img');

        // 必须要在图片加载完毕之后,才能使用
        img.onload = function() {
            var person = new Person( ctx, img, 4, 4, 50, 50, 50, 50 );

            setInterval( function() {

                // 清除画布
                ctx.clearRect( 0, 0, cvs.width, cvs.height );

                // 绘制
                person.draw();
                person.currentFrame = ++person.currentFrame >= person.widthFrame? 0 : person.currentFrame;  //帧动画效果

                // 计算下一次绘制时,小人的位置
                person.update();  //更新位置

            }, 100);
        }
    </script>
</body>
</html>

imgs/NPC.png:




canvas使用drawImage()方法绘制img和video的区别

drawImage()简介drawImage() 方法在画布上绘制图像、画布或视频。 drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。具体参数 参数 描...
  • qq_30100043
  • qq_30100043
  • 2017-08-29 11:06:49
  • 1810

绘制序列帧动画

HTML5 Canvas动画效果演示   首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧,这样看起来就像动画在播放。 div id="...
  • Rachealrq
  • Rachealrq
  • 2016-10-06 14:01:41
  • 406

canvas 绘制半透明图片

var maskCanvas=document.createElement("canvas");       maskCanvas.style="pointer-events: none; z-in...
  • ningcaicheng
  • ningcaicheng
  • 2017-01-02 14:57:57
  • 3320

html5 canvas drawImage图片模糊

问题:当使用如下设置时,图片显示模糊 javascriptvar img=new Image(); img.src="http://www.w3school.com.cn/i/eg_tulip.jp...
  • gdp12315
  • gdp12315
  • 2017-02-17 16:06:58
  • 1142

在canvas里绘制多个图像并且旋转图像

$(function() { var $my_canvas=$("#myCanvas"); var my_canvas=$my_canvas[0]; v...
  • u013285483
  • u013285483
  • 2016-08-02 15:48:16
  • 5331

Canvas-drawImage 绘制图片模糊问题

最近遇到这样的问题,使用canvas输出图片,图片比canvas区域大,尺寸限制之后反而变得特别模糊: 代码: var c = document.getElementById("m...
  • oYueMiJinDu
  • oYueMiJinDu
  • 2016-05-12 17:50:06
  • 2977

canvas drawImage初次加载以及加载完成后事件

直接调用canvas的 drawImage()方法首次加载时图片不显示,解决方案是在Img.onload()方法中绘制图。但是如果以后需要不断的绘制该图片的时候就会一直调用onload事件,出现图片一...
  • cuiyaoqiang
  • cuiyaoqiang
  • 2016-10-26 17:54:45
  • 3429

Html5新特性 canvas画板画直线和等比缩放居中裁剪图片

介绍一下canvas的几种使用方法,画直线和裁剪图片;包含以下两个方面: 1、canvas裁剪图片:h5的这个新特性,我们可以使用canvas进行图片的处理,比如裁剪,等比放大或缩小。比如我们有个...
  • fengshizty
  • fengshizty
  • 2014-05-14 12:52:23
  • 4908

Canvas 在高清屏下绘制图片变模糊的解决方法

问题: 用canvas绘制图片的时候会模糊,但是用img显示的时候就不会,canvas和img的大小是相同的  至于为什么会变模糊,这和浏览器处理 canvas 的方式有关,相关的文章可以参考这篇...
  • qyaroon
  • qyaroon
  • 2016-07-15 11:31:21
  • 7103

js语法5---canvas圆角图片

Title canvas to draw window.onload=function () { var drawi...
  • qq909157370
  • qq909157370
  • 2017-05-06 22:30:20
  • 997
收藏助手
不良信息举报
您举报文章:Canvas 帧动画(封装成对象),绘制图片(drawImage())
举报原因:
原因补充:

(最多只允许输入30个字)