SOURCE

console 命令行工具 X clear

                    
>
console
const canvas = document.getElementById("c");
const ctx = canvas.getContext('2d');
let radialGradient;
let distance = 100;
let distanceY = 100;
const speedX = 2,speedY = 2;
let setups = 1;

const line=(axisX) => {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(250,100);    
    ctx.lineTo(250,250);
    ctx.lineTo(500,500);
    ctx.lineWidth = 2;
    ctx.strokeStyle = "blue";
    ctx.stroke();  
    ctx.restore()
}

const draw = (axisX) => {
    /* 清空画布(或部分清空) */
    ctx.clearRect(0, 0, 600, 600);
    line();
    radialGradient = ctx.createRadialGradient(distance, distanceY, 10, distance, distanceY, 5);
    radialGradient.addColorStop(0, "#FFFFFF");
    radialGradient.addColorStop(1, "#EA7F26");
    ctx.fillStyle = radialGradient;
    ctx.beginPath();
    ctx.moveTo(distance, distanceY);
    ctx.arc(distance, distanceY, 5, 0, 2 * Math.PI, false);
    ctx.fill();
    
    if(setups==1)
    {
        distance = distance + speedX;    
        if(distance>=250)
        {
            setups=2
        }
    }
    else if(setups==2)
    {
        distanceY = distanceY + speedY;    
        if(distanceY>=250)
        {
            setups=3
        }
    }
    else if(setups==3)
    {
        distance = distance + speedX;    
        distanceY = distanceY + speedY;    
        if(distanceY>=250)
        {
            setups=4
        }
    }
    else if(setups==4)
    {
        distance = distance + speedX;    
        distanceY = distanceY + speedY;    
        if(distance>=500)
        {
            setups=1
            distance=100
            distanceY=100
        }
    }
    window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
<div id="map">
  <canvas id="c" width="600" height="600"></canvas>
</div>
html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
#map {
  width: 600px;
  height: 600px;
  overflow: hidden;
  border: currentColor 5px solid;
  color: #364051;
  box-sizing: border-box;
  animation: map 5s infinite;
  animation-direction: alternate;
  margin: 50px auto;
}

#c {
  display: block;
}

@keyframes map {
  0% {
    border-color: transparent;
  }
  ;
  100% {
    border-color: transparent;
  }
  ;
}