绘制图片

绘制图片有三种方法，分别是不同的参数对img对象进行绘制操作

drawImage()
- 三个参数drawImage(img,x,y)
  - img 图片对象、canvas对象、video对象
  - x,y 图片绘制的左上角
- 五个参数drawImage(img,x,y,w,h)
  - img 图片对象、canvas对象、video对象
  - x,y 图片绘制的左上角
  - w,h 图片绘制尺寸设置(图片缩放，不是截取)
- 九个参数drawImage(img,x,y,w,h,x1,y1,w1,h1)
  - img 图片对象、canvas对象、video对象
  - x,y,w,h 图片中的一个矩形区域
  - x1,y1,w1,h1 画布中的一个矩形区域

三个参数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.加载图片到内存即可*/
    /*创建对象*/
    var image = new Image();
    /*绑定加载完成事件*/
    image.onload = function () {
        /*实现图片绘制*/
        console.log(image);
        /*3参数*/
        /*图片对象*/
        /*绘制在画布上的坐标 x y*/
        ctx.drawImage(image,100,100);
    };
    /*设置图片路径*/
    image.src = 'image/01.jpg';

</script>
</body>
</html>

五个参数：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <canvas width="600" height="400"></canvas>
    <script>
        var myCanvas = document.querySelector('canvas');
        var ctx = myCanvas.getContext('2d');
        /*1.加载图片到内存即可*/

        /*创建对象*/
        var image = new Image();
        /*绑定加载完成事件*/
        image.onload = function () {
            /*5个参数*/
            /*图片对象*/
            /*绘制在画布上的坐标 x y*/
            /*是图片的大小  不是裁剪  是缩放*/
            ctx.drawImage(image,100,100,100,100);

        };
        /*设置图片路径*/
        image.src = 'image/01.jpg';
    </script>
</body>

</html>

九个参数：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <canvas width="600" height="400"></canvas>
    <script>
        var myCanvas = document.querySelector('canvas');
        var ctx = myCanvas.getContext('2d');
        /*1.加载图片到内存即可*/
        /*创建对象*/
        var image = new Image();
        /*绑定加载完成事件*/
        image.onload = function () {
            /*实现图片绘制*/

            /*9个参数*/
            /*图片对象*/
            /*图片上定位的坐标  x y */
            /*在图片上截取多大的区域  w h*/
            /*绘制在画布上的坐标 x y*/
            /*是图片的大小  不是裁剪  是缩放*/
            ctx.drawImage(image, 400, 400, 400, 400, 200, 200, 100, 100);

        };
        /*设置图片路径*/
        image.src = 'image/02.jpg';
    </script>
</body>

</html>

资源文件：

01.jpg

02.jpg

帧动画

帧动画顾名思义就是由一帧一帧的图片连续组成的动画，那么就可以通过不断的绘制图片，来绘制帧动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <canvas width="600" height="400"></canvas>
    <script>
        var myCanvas = document.querySelector('canvas');
        var ctx = myCanvas.getContext('2d');

        var image = new Image();
        image.onload = function () {
            /*图片加载完成*/
            /*动态的去获取当前图片的尺寸*/
            var imageWidth = image.width;
            var imageHeight = image.height;
            /*计算出每一个小人物的尺寸*/
            var personWidth = imageWidth / 4;
            var personHeight = imageHeight / 4;
            /*为截取图片*/
            /*帧动画  在固定的时间间隔更换显示的图片  根据图片的索引*/
            var index = 0;

            /*绘制在画布的中心*/
            /*图片绘制的起始点*/
            var x0 = ctx.canvas.width / 2 - personWidth / 2;
            var y0 = ctx.canvas.height / 2 - personHeight / 2;
            ctx.drawImage(image, 0, 0, personWidth, personHeight, x0, y0, personWidth, personHeight);
            setInterval(function () {
                index++;
                // 绘制之前清除已绘制的
                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                ctx.drawImage(image, index * personWidth, 0, personWidth, personHeight, x0, y0, personWidth,
                    personHeight);
                if (index >= 3) {
                    index = 0;
                }
            }, 1000);

        };
        image.src = 'image/03.png';
    </script>
</body>

</html>

资源文件：

方向键控制人物移动

在帧动画的基础上对小人的移动加以控制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <canvas width="600" height="400"></canvas>
    <script>
        var Person = function (ctx) {
            /*绘制工具*/
            this.ctx = ctx || document.querySelector('canvas').getContext('2d');
            /*图片路径*/
            this.src = 'image/04.png';
            /*画布的大小*/
            this.canvasWidth = this.ctx.canvas.width;
            this.canvasHeight = this.ctx.canvas.height;

            /*行走相关参数*/
            this.stepSzie = 10;
            /* 0 前  1 左  2 右  3 后  和图片的行数包含的图片对应上*/
            this.direction = 0;
            /*x轴方向的偏移步数*/
            this.stepX = 0;
            /*y轴方向的偏移步数*/
            this.stepY = 0;

            /*初始化方法*/
            this.init();
        };

        Person.prototype.init = function () {
            var that = this;
            /*1.加载图片*/
            this.loadImage(function (image) {
                /*图片的大小*/
                that.imageWidth = image.width;
                that.imageHeight = image.height;
                /*人物的大小*/
                that.personWidth = that.imageWidth / 4;
                that.personHeight = that.imageHeight / 4;
                /*绘制图片的起点*/
                that.x0 = that.canvasWidth / 2 - that.personWidth / 2;
                that.y0 = that.canvasHeight / 2 - that.personHeight / 2;
                /*2.默认绘制在中心位置正面朝外*/
                that.ctx.drawImage(image,
                    0, 0,
                    that.personWidth, that.personHeight,
                    that.x0, that.y0,
                    that.personWidth, that.personHeight);

                /*3.能通过方向键去控制人物行走*/
                that.index = 0;
                document.onkeydown = function (e) {
                    if (e.keyCode == 40) {
                        that.direction = 0;
                        that.stepY++;
                        that.drawImage(image);
                        /*前*/
                    } else if (e.keyCode == 37) {
                        that.direction = 1;
                        that.stepX--;
                        that.drawImage(image);
                        /*左*/
                    } else if (e.keyCode == 39) {
                        that.direction = 2;
                        that.stepX++;
                        that.drawImage(image);
                        /*右*/
                    } else if (e.keyCode == 38) {
                        that.direction = 3;
                        that.stepY--;
                        that.drawImage(image);
                        /*后*/
                    }
                }
            });
        }
        /*加载图片*/
        Person.prototype.loadImage = function (callback) {
            var image = new Image();
            image.onload = function () {
                callback && callback(image);
            };
            image.src = this.src;
        };
        /*绘制图片*/
        Person.prototype.drawImage = function (image) {
            this.index++;
            /*清除画布*/
            this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
            /*绘图*/
            /*在精灵图上的定位 x  索引*/
            /*在精灵图上的定位 y  方向*/
            this.ctx.drawImage(image,
                this.index * this.personWidth, this.direction * this.personHeight,
                this.personWidth, this.personHeight,
                this.x0 + this.stepX * this.stepSzie, this.y0 + this.stepY * this.stepSzie,
                this.personWidth, this.personHeight);
            /*如果索引超出了 变成0*/
            if (this.index >= 3) {
                this.index = 0;
            }
        };

        new Person();
    </script>
</body>

</html>