Canvas学习笔记（三）- 图片操作、坐标变换以及面向对象方式绘制可以用键盘控制的行走小人-CSDN博客

本文链接：https://blog.csdn.net/Ludwig1957/article/details/113612353

2021.2.2 Canvas（三）

文章目录

Canvas学习笔记（三）

Canvas学习笔记（三）

第五章图片操作

概述

在Canvas中，我们可以使用drawImage()方法来绘制图片。Canvas中所谓的绘制图片，其实就是把一张图片在Canvas中显示出来。

drawImage()方法共有三种调用方式：三参数、五参数、九参数。

在使用drawImage()方法前，我们需要先创建对象，设置图片路径，加载图片，绑定加载完成事件。

//加载图片到内存 不是通过dom方式<img src='' alt''>
/* var img=document.createElement('img');
img.src='images/坂本.jpg'; */

//创建对象
var image = new Image();
//绑定加载完成事件
image.onload = function() {
        console.log(image);
    }
    //设置图片路径
image.src = 'images/02.jpg'; //必须等图片加载完毕

drawImage()方法的三种调用方式

三个参数 drawImage(img,x,y)
- img: 图片对象、canvas对象、video对象
- x,y: 图片绘制的左上角坐标(x,y)
五个参数 drawImage(img,x,y,w,h)
- img: 图片对象、canvas对象、video对象
- x,y: 图片绘制的左上角坐标(x,y)
- w,h: 图片绘制的尺寸设置（图片缩放，不是截取）
九个参数 drawImage(img,x,y,w,h,x1,y1,w1,h1)
- img: 图片对象、canvas对象、video对象
- x,y: 第一对参数，回答浏览器从图片哪里开始截取
- w,h: 第二对参数，回答截取多大的图片
- x1,y1: 第三对参数，回答截取的图片放在canvas画布哪个位置
- w1,h1: 第四对参数，回答截取的图片在画布绘制(缩放)的大小

<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    var image = new Image();
    image.onload = function() {
        //实现图片绘制
        console.log(image);
        //绘制图片的三种方式
        /* 3参数 
        ctx.drawImage(image, 100, 100); */

        /* 5参数
        ctx.drawImage(image, 100, 100, 100, 100) */

        //9参数
        ctx.drawImage(image, 800, 800, 400, 400, 200, 100, 200, 100)
    }
    //设置图片路径
    image.src = 'images/02.jpg'; //必须等图片加载完毕
</script>

Note:必须在图片加载完成后才能将图片绘制到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;

        //第一对 0,0回答从图片哪里开始截取
        //第二对 imageWidth,imageHeight回答截取多大的图片
        //第三对 x0,y0回答截取的图片放在canvas画布哪个位置
        //第四对 imageWidth,imageHeight回答截取的图片在画布绘制（缩放）的大小
        ctx.drawImage(image, 0, 0, personWidth, personHeight, x0, y0, personWidth, personHeight);
        setInterval(function() {
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            index++;
            ctx.drawImage(image, index * personWidth, 0, personWidth, personHeight, x0, y0, personWidth, personHeight);
            if (index >= 3) {
                index = 0;
            }
        }, 200)
    }
    image.src = 'images/04.png'; //必须等图片加载完毕
</script>

实例:用键盘控制的行走的小人

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid #ccc;
            display: block;
            margin: 100px auto;
        }
    </style>
</head>

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

            //行走相关参数
            this.stepSize = 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) {
                    //console.log(e.keyCode);
                    if (e.keyCode == 38) {
                        //上
                        that.direction = 3;
                        that.stepY--;
                        that.drawPics(image);
                    } else if (e.keyCode == 37) {
                        //左
                        that.direction = 1;
                        that.stepX--;
                        that.drawPics(image);
                    } else if (e.keyCode == 39) {
                        //右
                        that.direction = 2;
                        that.stepX++;
                        that.drawPics(image);
                    } else if (e.keyCode == 40) {
                        //下
                        that.direction = 0;
                        that.stepY++;
                        that.drawPics(image);
                    };
                };
            });
        };
        //加载图片
        Person.prototype.loadImage = function(callback) {
            var image = new Image();
            image.onload = function() {
                callback && callback(image);
            };
            image.src = this.src;
        };
        //绘制图片
        Person.prototype.drawPics = function(image) {
            this.index++;
            //清除画布
            this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
            //绘图
            //在精灵图上的定位 x 由索引确定 
            //在精灵图上的定位 y 由方向确定
            this.ctx.drawImage(image,
                (this.index % 4) * this.personWidth, this.direction * this.personHeight, this.personWidth, this.personHeight,
                this.x0 + this.stepX * this.stepSize, this.y0 + this.stepY * this.stepSize,
                this.personWidth, this.personHeight);
        };
        new Person();
    </script>
</body>

</html>

第六章变形操作（坐标变换）

在Canvas中，有时候我们需要实现文字或图片的各种变形效果，如位移、缩放、旋转、倾斜等，这个时候就涉及到Canvas中的变形操作。

Canvas为我们提供了以下几种变形操作的方法：

平移移动画布的原点
- translate(x,y) //参数表示将Canvas坐标系的原点移动到目标点的坐标
缩放
- scale(x,y) //参数表示宽高的缩放比例，是对Canvas坐标系坐标轴的缩放
旋转
- rotate(angle) //参数表示旋转角度，可以理解为坐标系的旋转，旋转中心在Canvas坐标系的原点

<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /* ctx.translate(100, 100); //变换的是坐标原点，把坐标原点移到(100，100)
    ctx.strokeRect(100, 100, 100, 100);

    ctx.scale(0.5, 1); // 缩放的是坐标轴， 把x轴缩小到原来一半， 原来表示100的地方现在表示200
    ctx.strokeRect(100, 100, 200, 200); */

    //使围绕正方形中心转
    var startAngle = 0;
    ctx.translate(150, 150)
    setInterval(function() {
        startAngle = Math.PI / 180;
        ctx.rotate(startAngle);
        ctx.strokeRect(-50, -50, 100, 100);
    }, 100);
</script>