SOURCE

console 命令行工具 X clear

                    
>
console
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;
}