canvas学习day2——对象版帧动画，小人原地行走踏步，drawimage，根据按键控制小人走动，三目运算符

最新推荐文章于 2024-05-10 12:02:08 发布

熊熊举高高

最新推荐文章于 2024-05-10 12:02:08 发布

阅读量596

点赞数 1

文章标签： canvas

本文链接：https://blog.csdn.net/weixin_41571938/article/details/116213286

版权

前面就简单的介绍过了，其实就是涉及到几个知识点
1、定时器
2、drawimage函数
3、在画第二章图片之前擦除第一张图片即可
4、CSS精灵技术也称雪碧技术
效果图 有点慢将就着看随便找几张图片 and gif软件制作即可
在这里插入图片描述
根据按键控制小人走动
在原本的基础上
1、绑定键盘监听事件，通过按下对应的键来改变小人行走的方向。
2、定时器——每隔一段事件执行清除画布、绘制图像、改变当前帧的值，更新小人位置，下面是需要涉及到的知识

具体思路为
生成实例、清除画布、绘制图像、改变当前帧的值，更新小人位置
同时在这个过程当中绑定好按钮监听事件，通过识别按钮的值来改变direction，定时器——每隔一段事件执行清除画布、绘制图像、改变当前帧的值，更新小人位置。

可以通过this.x this.y获得当前图像位置的坐标然后++来控制移动的距离

drawimage函数要用多少个参数
9个参数
1、首先需要考虑画在哪个位置所以至少3个 image x y
2、因为我们这边利用的是CSS精灵技术
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。dx和dy是image在canvas中定位的坐标值；dw和dh是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值；sx和sy是image所要绘制的起始位置，sw和sh是image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值。

三目运算符
? :
a?b:c 这个意思的画就是
if(a)
b;
else
c;
如果a为真的话，那么就出b 如果a为假那么就出c
但是今天遇到的是这个
this.y = this.y > this.ctx.canvas.height? -this.height: this.y;
有个减号
我寻思着是 this.y=-this.height;还是this.y=this.y-this.height;
通过代码测试是this.y=-this.height;
后面才发现 this.height 是人物的高度而不是画布的高度
神经了

混入式继承相关介绍

帧动画，小人原地行走踏步基础例子

var a=1,b=2,c=3,d;
        d=a?-b:c;
        console.log(d);

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
   
            border:1px solid red;
        }
        img {
   
            display: none;
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <img src="./imgs/NPCrabbitbaby.png">
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d')<

最低0.47元/天解锁文章

熊熊举高高

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
canvas学习day2——对象版帧动画，小人原地行走踏步，drawimage，根据按键控制小人走动，三目运算符

前面就简单的介绍过了，其实就是涉及到几个知识点1、定时器2、drawimage函数3、在画第二章图片之前擦除第一张图片即可4、CSS精灵技术也称雪碧技术效果图有点慢将就着看随便找几张图片 and gif软件制作即可根据按键控制小人走动在原本的基础上1、绑定键盘监听事件，通过按下对应的键来改变小人行走的方向。2、定时器——每隔一段事件执行清除画布、绘制图像、改变当前帧的值，更新小人位置，下面是需要涉及到的知识具体思路为生成实例、清除画布、绘制图像、改变当前帧的值，更新小人位置
复制链接

扫一扫