SOURCE

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      || 
    window.msRequestAnimationFrame     ||  
    function( callback ){
    window.setTimeout(callback, 1000 / 60);
  };
})();




window.addEventListener('load', eventWindowLoaded, false); 
function eventWindowLoaded () {
	canvasApp(); 
} 
function canvasSupport (e) { 
	return !!e.getContext; 
} 
function canvasApp () {
	var canvas=document.getElementById('canvas');
	if (!canvasSupport(canvas)) {
		return; 
	} 
	var context=canvas.getContext('2d');
	resize();
  window.onresize = resize;

  function resize() {
    canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  }
	
		
 	var arrows =[];
	var route=[
			{
				startX:400,
				startY:10,
				distance:100,
				angle:270
			},
			{
				startX:400,
				startY:140,
				distance:120,
				angle:0
			},
			{
				startX:280,
				startY:140,
				distance:80,
				angle:270
			}
		];



	function ColorPoint(route,infinite){
		
		this.width = 5;
		this.heigth = 8;
		this.speed = 3;
		this.oldAngle=null;
		this.route = route;
		this.cloneRoute = $.extend(true,[],route);
		this.af = null;
		this.infinite = infinite;
		
		
		this.draw=function(){

			context.beginPath(); 
			var gradient = context.createLinearGradient(this.startX, this.startY, this.startX, this.startY+this.heigth); 
			gradient.addColorStop(0, '#fdeff9'); 
			gradient.addColorStop(0.4, '#ec38bc'); 
			gradient.addColorStop(0.6, '#7303c0');
			gradient.addColorStop(1, '#03001e');  
			context.fillStyle = gradient;  
			context.fillRect(this.startX, this.startY, this.width, this.heigth);
			context.closePath();
		}
		this.clear=function(){
			context.clearRect(this.oldX,this.oldY,this.width,this.heigth);
				
		}
		this.move=function(self){
				var _ =self;
				var i = 0;
				var item = _.cloneRoute.shift();
				var angle= item.angle;
				_.angle=angle;
				_.startX = item.startX;
				_.startY = item.startY;
				var toX = Math.ceil(_.startX-item.distance*Math.cos(angle* Math.PI / 180));
				var toY = Math.ceil(_.startY-item.distance*Math.sin(angle* Math.PI / 180));
				var moveX = this.speed*Math.cos(angle* Math.PI / 180);
				var moveY = this.speed*Math.sin(angle* Math.PI / 180);
				var _move = function(){
					_.clear();
					_.draw(angle);
					var nextX = _.startX-moveX;
					var nextY = _.startY-moveY;
					if((Math.abs(nextX-toX)<=1)&&(Math.abs(nextY-toY)<=1)){
						console.info("**********************");
						_.oldX = _.startX;
						_.oldY = _.startY;
						_.oldAngle = angle;
						cancelAnimationFrame(_.af);
						if(_.cloneRoute.length>0){
								_.move(_);
						}else{
							if(_.infinite){
								_.cloneRoute = $.extend(true,[],_.route);
								_.move(_);
							}
						}
					}else{
						_.oldX = _.startX;
						_.oldY = _.startY;
						_.oldAngle = angle;
						_.startX = nextX;
						_.startY = nextY;
						_.af = requestAnimFrame(_move);						
					}
				}
				_move();
			}
	}
	
	var colorPoint = new ColorPoint(route,false);
	colorPoint.move(colorPoint);
}

 <canvas id="canvas" >您的浏览器不支持canvas画布</canvas>

body{
  margin: 0;
  padding: 0;
	width:100vw;
	height:100vh;
}
canvas{
  position: absolute;
}