javascript - 寻路算法后续html5实现？

Question

在做百度前端技术学院的题，要求是通过点击能够使绿色标志绕过障碍物自动寻路移动到鼠标点击位置，相关的自动寻路算法已经实现，取得返回值为一个数组。
但是不知道如何通过返回的数组实现对应绿点的平滑移动？以下是目前部分代码

function Person() {
    this.x=(canWidth-CELL_WIDTH)/2;
    this.y=CELL_HEIGHT/2;
    this.img=new Image;
}

Person.prototype.draw=function(aimx,aimy){
    
    //this.x=lerpDistance(aimx,this.x,0.5);
    //this.y=lerpDistance(aimy,this.y,0.5);
    this.img.src="img/person.png";
    ctx2.drawImage(this.img,this.x,this.y);
    
}

document.body.onload=game;

function game() {
    
    init();
    lastTime=Date().now;
    gameloop();
    
}
function init(){
    //获得canvas
    can1=document.getElementById('map');
    can2=document.getElementById('player');
    ctx1=can1.getContext('2d');
    ctx2=can2.getContext('2d');
    can1.height=canHeight;
    can1.width=canWidth;
    can2.height=canHeight;
    can2.width=canWidth;
    //__________________________________

    //person();
    finalPlace();
    wall=new Wall();
    wall.init();

    //wall生成获取地图
    var map=wall.getMap();
    console.log(map);
    //生成人物
    person=new Person();
    person.draw((canWidth-CELL_WIDTH)/2,CELL_HEIGHT/2);    
    var path=new Path(map);
    
    //点击地图，触发地图的自动寻路功能，传入当前人物位置。
    document.onclick=function(){
        resultList=path.init.call(path);
    }
    setInterval("drawPath()",500);
    //addEvent(document,"click",function (){path.init.call(path)});
}
function drawPath(){
    if(resultList.length>0){
        var node=resultList.pop();

        person.draw(node[1],node[0]);
        console.log(node);
        console.log(resultList.length);
        if(resultList.length==0){
            person.x=node[0];
            person.y=node[1];
        }
    }

}

Answer 1

先试试直接把数组里面的点直接连起来做直线运动喽

这个成功了，再去试试平滑移动，所谓平滑移动无非是二次插值而已。

Answer 2

canvas
或者
帧动画