代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="300" height="200" style="margin-top: 100px;margin-left: 100px;border: 1px solid red;"></canvas>
<script>
var arr = [20,30,40,50,60,70,90,110,130,150,170,190,210,230,250];//每个点的x坐标
var brr = [100,120,80,90,110,130,140,150,130,120,100,90,80,70,50];//每个点的y坐标
var canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
ctx.lineWidth = 2
var i = 1;
var arrl = arr.length;//数组长度,15个坐标
var dh = 0.1;//两点之间的线*dh=正在延长的线
function zx(){
//先执行两点之间线段延长的动画
if(dh<1){//当线段还没延长到终点坐标时执行以下动画
ctx.moveTo(arr[i-1],brr[i-1])//起点坐标是终点坐标的上一个点
ctx.lineTo(arr[i-1]+(arr[i]-arr[i-1])*dh,brr[i-1]+(brr[i]-brr[i-1])*dh)
//移动的坐标点 = 起点坐标+(终点坐标与起点坐标之差)*dh
ctx.lineJoin = 'round';
ctx.strokeStyle = "#FBC248"
ctx.stroke();
ctx.closePath();
dh+=0.1;//延长线长度 每次增加两点之间的线的1/10
}else{//一条线段动画完成后
i++;//起点坐标和终点坐标 切换成下一个坐标点
dh=0.1;//延长线恢复为两点之间的线的0.1倍,等下一次if执行后边坐标点之间线的动画
}
if(i<arrl){//当i等于数组长度时停止执行
setTimeout(zx,10);//10毫秒执行一次
}
}
zx();
</script>
</body>
</html>
