let canvas=document.getElementById('canvas');
let ctx=canvas.getContext('2d');
// ctx.beginPath()//新建一个路径,绘制到这个指定路径上
// ctx.moveTo(5,69)//绘制图形的起点
// ctx.lineTo(195,69) //第一步连接到这个点
// ctx.lineTo(41,181) //第二步
// ctx.lineTo(100,0) //第三步
// ctx.lineTo(159,181) //第四步
// ctx.lineTo(5,69) //第五步
// ctx.closePath()//调用路径闭合的方法,按照顺序把所有的点用线连起来
// ctx.strokeStyle='red';
// ctx.stroke()
let i=0;
let interval=setInterval(()=>{
ctx.clearRect(-100,-100,500,500) //把这个区域的内容清空
switch(i){
case 0:
ctx.beginPath()//新建一个路径,绘制到这个指定路径上
ctx.moveTo(5,69)//绘制图形的起点
ctx.lineTo(195,69) //第一步连接到这个点
// ctx.closePath()//调用路径闭合的方法,按照顺序把所有的点用线连起来
ctx.strokeStyle='red';
ctx.stroke()
i=i+1;
break;
case 1:
ctx.beginPath()//新建一个路径,绘制到这个指定路径上
ctx.moveTo(5,69)//绘制图形的起点
ctx.lineTo(195,69) //第一步连接到这个点
ctx.lineTo(41,181) //第二步
// ctx.closePath()//调用路径闭合的方法,按照顺序把所有的点用线连起来
ctx.strokeStyle='red';
ctx.stroke()
i=i+1;
break;
case 2:
ctx.beginPath()//新建一个路径,绘制到这个指定路径上
ctx.moveTo(5,69)//绘制图形的起点
ctx.lineTo(195,69) //第一步连接到这个点
ctx.lineTo(41,181) //第二步
ctx.lineTo(100,0) //第三步
// ctx.closePath()//调用路径闭合的方法,按照顺序把所有的点用线连起来
ctx.strokeStyle='red';
ctx.stroke()
i=i+1;
break;
case 3:
ctx.beginPath()//新建一个路径,绘制到这个指定路径上
ctx.moveTo(5,69)//绘制图形的起点
ctx.lineTo(195,69) //第一步连接到这个点
ctx.lineTo(41,181) //第二步
ctx.lineTo(100,0) //第三步
ctx.lineTo(159,181) //第四步
// ctx.closePath()//调用路径闭合的方法,按照顺序把所有的点用线连起来
ctx.strokeStyle='red';
ctx.stroke()
i=i+1;
break;
case 4:
ctx.beginPath()//新建一个路径,绘制到这个指定路径上
ctx.moveTo(5,69)//绘制图形的起点
ctx.lineTo(195,69) //第一步连接到这个点
ctx.lineTo(41,181) //第二步
ctx.lineTo(100,0) //第三步
ctx.lineTo(159,181) //第四步
ctx.lineTo(5,69) //第五步
// ctx.closePath()//调用路径闭合的方法,按照顺序把所有的点用线连起来
ctx.strokeStyle='red';
ctx.stroke()
clearInterval(interval)
break;
}
},500)
<canvas width="570" height="270" id="canvas"></canvas>
<div>canvas画五角星</div>
*{
margin: 0;
padding: 0;
}
div{
text-align: center;
}