画布day3绘制图片

做动画

绘制图片

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 画布中的一个矩形区域

序列帧动画

绘制精灵图
动起来
控制边界
键盘控制

坐标变换

平移移动画布的原点
- translate(x,y) 参数表示移动目标点的坐标

缩放
- scale(x,y) 参数表示宽高的缩放比例

旋转
- rotate(angle) 参数表示旋转角度

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
<body>
<script>
        //用法1：三个参数
        // 第一个参数：图片对象，后两个参数：图片在画布中的位置 x，y
         ctx.drawImage(img,100,100);

        //用法2：五个参数 第四个，五个表示图片的宽高，不是裁剪 ，是缩放

         ctx.drawImage(img,100,100,200,200);

        //用法三：9个参数
        // 第一组 ：图片上的定位坐标（x，y） -----就是说从图片的那个位置开始截取
        //第二组：截取图片区域的宽高 w，h；
        //第三组：绘制图片在画布中的位置（x，y） -------就是说图片在画布的那个位置显示
        //第三组：在画布中图片的宽高w，h-------如果和第二组大小一样，就不缩放，如果比第二组大，就放大
        ctx.drawImage(img,134,129,200,200,100,100,200,200);
    };
</script>
</body>
</html>

图片对象

为什么要引入图片对象？

因为做游戏的时候必定会引入很多图片，而引入很多图片用DOM的方式引入，那么就会使得页面上存在很多图片，哪怕是隐藏起来，那这些图片也还在页面上，显得累赘

引入图片对象方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid red;
            margin: 100px auto;
            display: block;
        }
    </style>
</head>
<body>
<canvas width="600" height="600"></canvas>
<script>
    //获取画布
    var canvas =  document.querySelector('canvas');
    //获取画布上下文,创造一个环境
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.onload = function () {

        // 不需要在页面上（DOM），图片多了，显得累赘，哪怕影藏，这张图片也在玉面上，所以只需要放在内存上
        // 所以需要加载图片
        var img = document.createElement('img');
        img.src = 'image/01.jpg';

        // 当图片没有加载完，是获取不到图片的，所以必须等图片加载完
        //由于有加载顺序，有的浏览器图片可能加载完了，再绑定，没必要了，为了兼容，所以把加载事件写在前面
        img . onload = function (){
            //一定可以使用
        };
        img.src = 'image/01.jpg';
    };
    // 加载图片，添加src属性
    img.src = 'image/image/01.jpg';
</script>
</body>

一种是通过creatElement创建

一种是通过创建对象的方式创建（建议用这种）

html代码

图片对象

猜你喜欢