前言

之前两篇文章讲了一些canvas基础入门的知识点和一下小案例如下：
Canvas初探入门— 基础图形的绘制
Canvas初探入门—实现鼠标画板
这一篇通过案例实现人物移动动画，下面一起来看看

实现功能

点击开始，人物按照设定好的路线开始移动，点击暂停停止移动，能够按照设置的路线完成任务移动

步骤

1.绘制人物对象的信息

首先我们要确定人物的行驶路径，从哪个坐标开始到哪个坐标结束。然后获得 CanvasRenderingContext2D 对象，该对象提供基本的绘图命令。

window.onload = function(){var arr = [{x:0,y:0},{x:200,y:300}];  //行驶坐标点var speed = 1,timer,flag=false; //速度var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');var img = new Image();img.src='img/person.png';
}

2.点击事件

这里对点击事件进行了封装的处理，
点击开始之后，执行下面定时器的play
点击暂停，执行定时器的stop

//单击事件
document.querySelector(".play").onclick=function(){play()};
document.querySelector(".stop").onclick=function(){stop()};

3.路线绘制

点击了按钮之后，人物要进行移动，那么这里就要设置一个定时器控制人物移动的绘图
这里是定时器的开始和暂停

//定时器   开始
function play(){if(flag) return;timer = setInterval(draw,2);flag = true;
};
//暂停
function stop(){clearInterval(timer);flag = false;
}

定时器开始之后，就要进行路径的绘制
首先我们要分析人物路线的逻辑，坐标从{x:0,y:0}到{x:200,y:300}，x和y的值都会一点点的加上来，
判断数组中第0个x的值<一个的x的值的话，就要进行+的处理arr[0].x+=speed; 后面y同理
然后绘制对应的背景图片 ctx.drawImage(img,arr[0].x,arr[0].y,30,30);属性分别代表：图片地址，x轴，y周，宽，高的意思，此时我们就可以在第一步的信息中加入图片的信息

function draw(){ctx.clearRect(0,0,canvas.width,canvas.height);//清除画布内容if(arr[0].x<arr[1].x){arr[0].x+=speed;};if(arr[0].y<arr[1].y){arr[0].y+=speed;};//drawImage(img,x,y,w,h);ctx.drawImage(img,arr[0].x,arr[0].y,30,30);//行驶的轨迹ctx.strokeStyle='green';ctx.lineTo(arr[0].x,arr[0].y);  //画点ctx.stroke();  //执行绘制}

因为canvas是每次绘制一个图像，所以我们需要在每次定时器运行的时候清除画布的内容
这里还给人物设置了一个行驶的轨迹，添加一个人物坐标的线即可

最后

这个小案例的关键就是实现人物路径的绘制和移动，也就是draw中的逻辑，关于人物移动的路线主要就是通过坐标进行控制，还有人物速度等，都能通过属性进行自定义。其实重点就是掌握坐标画点，以及坐标变化的逻辑，有想自己试试的也可以私我获取案例源码~

canvas入门初探—实现人物移动动画相关推荐

Canvas入门教学（4）动画与碰撞检测
上节课给大家分享了canvas里对于图像的操作,我们可以截取图像,并且以像素为单位改变图片,这节课来给大家分享canvas的动画操作. 首先我们先来实现一个例子,我希望制作一个小球在浏览器屏幕里来回移 ...
2D游戏入门——小狐狸系列（六）为人物添加动画
Session06:动画效果Animation 添加动画效果这节课我们来为人物添加动画效果先为人物创建一个Animator组件,并创建一个Animator Controller,将它拖到Anima ...
html5 canvas实际应用,Html5 Canvas入门及经典应用
Html5 Canvas入门及经典应用时间:2019-02-15 来源:华清远见 canvas想必对于前端的工程师都不陌生了,它是 HTML5 新增的「画布」元素,是HTML5 的一大亮点, ...
Canvas入门教程
Canvas入门教程 1. Canvas初识 1.1 Canvas基础 1.2 Canvas填充与路径绘制 1.3 Canvas绘制圆 1.4 Canvas绘制折线线段 1.5 贝塞尔曲线实现 1.6 ...
Canvas入门－利用Canvas绘制好玩的电子时钟
在这之前你需要了解一下方法的使用: beginPath() closePath() moveTo() lineTo() fill() stroke() fillRect() clearRect() ...
Torchlight(火炬之光)人物骨骼动画
火炬之光的人物骨骼动画信息并不存储在skeleton文件里, 而是单独的放在animation文件里, 通过它将动画与音效,特效关联起来的. 所以为了不改变游戏中的文件内容, 我采用了读取配置文件的方 ...
canvas入门实战--邀请卡生成与下载
1.前言写了很多的javascript和css3的文章,是时候写一篇canvas的了.canvas是html5提供的一个新的功能!至于作用,就是一个画布.然后画笔就是javascript.canva ...
Mocha 和 Chai 入门初探
转载自楼主个人博客 Mocha 和 Chai 入门初探 Chai 在和 jest 作比较的时候, 两者主要的不同就是 jest 的集成度比较高内置断言库, 而 mocha 需要搭配额外的断言库, 在此 ...
基于JavaScript的人物走路动画
基于JavaScript的人物走路动画想要实现人物走路的动态图,可以连续更换图片,给人一种人物在走路的假象,但是接下来我们用另外一种方法来实现,将所有单张图片拼接成一个长图,可以让图片移动代替更换图 ...

canvas入门初探—实现人物移动动画

前言

实现功能

步骤

1.绘制人物对象的信息

2.点击事件

3.路线绘制

最后

canvas入门初探—实现人物移动动画相关推荐

最新文章

热门文章