前言

之前两篇文章讲了一些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,定时器,人物,img,ctx,arr,移动
来源： https://blog.csdn.net/weixin_45745641/article/details/122406704