用Canvas学基础：制作人物移动动画

前言

之前 couple of articles introduced some fundamental concepts and a few case studies, such as:
Canvas初探入门— 基础图形的绘制
Canvas初探入门—实现鼠标画板
这一篇文章通过实例开发人物移动动画效果。让我们深入探索这个动态效果的开发过程。

实现功能

启动操作后,人物将依照预先规划好的路径展开行进;当按下暂停按钮时,行进将被终止,随后系统将根据设置的路径引导目标完成任务

步骤

1.绘制人物对象的信息

为了准确规划角色的移动轨迹，请确定其起始点与终点的位置。随后获取CanvasRenderingContext2D对象，并使此对象可执行基础绘图指令。

    window.onload = function(){
    var arr = [{x:0,y:0},{x:200,y:300}];  //行驶坐标点
    var speed = 1,timer,flag=false; //速度