前端基础学习之h5-canvas入门4-图片绘制、帧动画

最新推荐文章于 2023-05-16 15:17:22 发布

Endless Daydream233

最新推荐文章于 2023-05-16 15:17:22 发布

阅读量351

点赞数

分类专栏：前端学习基础记录文章标签： canvas js javascript html5 html

本文链接：https://blog.csdn.net/gua222/article/details/112919297

版权

前端学习基础记录专栏收录该内容

57 篇文章 7 订阅

订阅专栏

1.直线绘制及绘制折线图
 2.矩形绘制及绘制渐变矩形
 3.曲线绘制及绘制饼状图

绘制图片

首先得知道html中图片加载的几种方式

<!--1.dom中直接加载-->
<img src="img/1EF971FD.jpg" alt="">

//2.加载图片到内存中
	let img=document.createElement('img');
	img.src='img/1EF971FD.jpg';
	document.body.append(img);

 //3.使用图片内置构造函数
    let image=new Image();
    //图片加载完成之后
    image.onload=function(){
        console.log(this);
        // document.body.append(this);
    };
    image.src="img/1EF971FD.jpg"

drawImage() canvas图片绘制函数
- 三个参数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 画布中的一个矩形区域

实例

绘制图片的方式1：三种参数形式

   //图片绘制的三种方式
    let myCanvas=document.querySelector('canvas');
    let ctx=myCanvas.getContext('2d');
    //画个网格 好区分下面图片
    let canvasW=ctx.canvas.width;
    let canvasH=ctx.canvas.height;
    for(let i=0;i<(canvasW/50);i++){
        ctx.beginPath();
        ctx.moveTo(0,i*50);
        ctx.lineTo(canvasW,i*50);
        ctx.strokeStyle="#ddd";
        ctx.stroke();
    }
    for(let i=0;i<(canvasH/50);i++){
        ctx.beginPath();
        ctx.moveTo(i*50,0);
        ctx.lineTo(i*50,canvasH);
        ctx.strokeStyle="#ddd";
        ctx.stroke();
    }

    let image=new Image();
    image.onload=function () {

        //1 三个参数
        /*
        * 参数1： image
        * 参数2： 在画布上的坐标位置 x
        * 参数3： 在画布上的坐标位置 y
        * 绘制的是图片左上角的位置坐标  和 之前的矩形绘制相似
        * */
        ctx.drawImage(this,20,20);
    };
    image.src="img/fengche.png";

绘制图片的方式2：五种参数形式

		//2. 5个参数
        /*
        * 参数1： image
        * 参数2： 在画布上的坐标位置x
        * 参数3： 在画布上的坐标位置y
        * 参数4： 在画布上的缩放大小 宽
        * 参数5： 在画布上的缩放大小 高
        * */
        ctx.drawImage(this,100,100,200,200);

绘制图片的方式3：九种参数形式

		//3. 9个参数
        /*
        * 参数1： image
        * 参数2： 图片上的定位坐标 sx
        * 参数3： 图片上的定位坐标 sy
        * 参数4： 图片上的切割宽度 sw
        * 参数5： 图片上的切割高度 sh
        * 参数6： 在画布上的位置坐标 dx
        * 参数7： 在画布上的位置坐标 dy
        * 参数8： 在画布上的缩放大小 宽 dw
        * 参数9： 在画布上的缩放大小 高 dh
        * */
		ctx.drawImage(this,100,100,300,300,100,100,200,200)

绘制图片:在画布的中心位置绘制帧动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        canvas{
            border: 1px solid #cc6600;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<canvas width="600" height="600"></canvas>
<script>
    //绘制帧动画
    let myCanvas=document.querySelector('canvas');
    let ctx=myCanvas.getContext('2d');

    let image=new Image();
    image.onload=function () {
        //在画布的中心位置绘制
        let canvasW=ctx.canvas.width;
        let canvasH=ctx.canvas.height;
        let x0=canvasW/2;
        let y0=canvasH/2;
        //获取图片的宽高  ====每行四张小图 每列四张小图
        // let imageW=this.width/12;
        let imageW=this.width/4;
        //获取单个小图片的宽高
        // let imageH=this.height/8;
        let imageH=this.height/4;
        //设置索引值
        let index=0;
        //使用定时器的方式来动态绘图
        // ctx.drawImage(this,0,0,imageW,imageH,x0-imageW/2,y0-imageH/2,imageW,imageW);
        setInterval(function () {
            //在绘制前先清除一次画布 之前绘制矩形时用过的清除矩形
            ctx.clearRect(0,0,canvasW,canvasH);
            ctx.drawImage(image,index*imageW,0,imageW,imageH,x0-imageW/2,y0-imageH/2,imageW,imageH);
            index++;
            // if(index >=12){
            if(index >=4){
                index=0;
            }
        },200)
    };
    // image.src="img/canvas/1.png";
    image.src="img/canvas/04.png";
</script>
</body>
</html>

绘制图片:实现用上下左右键操控动画的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        canvas {
            border: 1px solid #cc6600;
        }
    </style>
</head>
<body>
<!--<img src="img/canvas/04.png" alt="">-->
<canvas width="600" height="600"></canvas>
<script>
    // 绘制行走的小人 根据键盘的上下左右键来控制
    // 以对象的方式来做
    // 创建构造函数
    // 初始化时加载图片
    // 人物面向前面
    // 键盘操作人物
    // 操作键盘控制人物走动  有几个需要控制的点
    // 1.一步走多大距离 step
    // 2.走的方向 direction
    // 3.走了多少步 分往x轴走了多少 往y轴走多少
    // 4.走的形态 --即每个方向走到第几个小图 需要index控制
    let Character = function (ctx) {
        this.ctx = ctx || document.querySelector('canvas').getContext('2d');
        this.canvasWidth=this.ctx.canvas.width;
        this.canvasHeight=this.ctx.canvas.height;
        this.imgSrc="img/canvas/04.png";
        //键盘操控人物 需要两个条件
        //1. 人物走动的一步的大小
        this.stepSize=20;
        this.stepY=0;
        this.stepX=0;
        //2. 走动的方向---根据精灵图来判断 0 向前（下） 1 左 2 右 3向后 （上）
        this.direction=0;
        this.init();
    };
    Character.prototype.init=function () {
        let _this=this;
        this.loadImg(function (image) {
            //图片加载完成后执行其他操作
            //1.让图片默认在画布中心正面显示
             //获取画布中心点
            _this.x0=_this.canvasWidth/2;
            _this.y0=_this.canvasHeight/2;
            //获取单个人物的大小
            _this.cW=image.width/4;
            _this.cH=image.height/4;
            _this.ctx.drawImage(image,0,0,_this.cW, _this.cH, _this.x0- _this.cW/2, _this.y0- _this.cH/2, _this.cW, _this.cH);
            //2.键盘操作人物
            //需要一个索引来控制显示每个方向的哪一个形态的人物
            //每按一次键盘，index就得改一次
            _this.index=0;
            document.onkeydown=function (e) {
                if(e.key==="ArrowUp"){
                    //上
                    _this.direction=3;
                    _this.stepY--;
                    _this.drawImg(image);
                }else if(e.key==="ArrowDown"){
                    //下
                    _this.direction=0;
                    _this.stepY++;
                    _this.drawImg(image);
                }else if(e.key==="ArrowLeft"){
                    //左
                    _this.direction=1;
                    _this.stepX--;
                    _this.drawImg(image);
                }else if(e.key==="ArrowRight"){
                    //右
                    _this.direction=2;
                    _this.stepX++;
                    _this.drawImg(image);
                }
            }
        })
    };
    //加载图片
    Character.prototype.loadImg=function (callback) {
        let image=new Image();
        image.onload=function(){
            callback && callback(image);
        };
        image.src=this.imgSrc;
    };
    //绘制图片
    Character.prototype.drawImg=function(image){
        let cX=this.x0-this.cW/2+this.stepX*this.stepSize;
        let cY=this.y0-this.cH/2+this.stepY*this.stepSize;
        //绘制前先清除画布
        this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);
        this.index++;
        //图片截取的位置动态 x轴与index有关 y轴与方向有关
        //图片在画布中的定位动态 x与原始位置 以及stepX有关 y轴与原始位置以及stepY有关
        this.ctx.drawImage(image,this.index*this.cW,this.direction*this.cH,this.cW,this.cH,cX,cY,this.cW,this.cH);
        if(this.index>=3){
            this.index=0;
        }
    };

    let character=new Character();


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

Endless Daydream233

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端基础学习之h5-canvas入门4-图片绘制、帧动画

1.直线绘制及绘制折线图2.矩形绘制及绘制渐变矩形3.曲线绘制及绘制饼状图绘制图片首先得知道html中图片加载的几种方式<img src="img/1EF971FD.jpg" alt="">//2.加载图片到内存中 let img=document.createElement('img'); img.src='img/1EF971FD.jpg'; document.body.append(img); //3.使用图片.
复制链接

扫一扫