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