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:2,
				angle:270
			},
			{
				startX:400,
				startY:140,
				distance:120,
				angle:0
			},
			{
				startX:280,
				startY:140,
				distance:80,
				angle:270
			}
		];



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

			context.beginPath(); 
			var gradient = context.createLinearGradient(this.startX, this.startY, this.endX, this.endY); 
			gradient.addColorStop(0, '#fdeff9'); 
			gradient.addColorStop(0.4, '#ec38bc'); 
			gradient.addColorStop(0.6, '#7303c0');
			gradient.addColorStop(1, '#03001e');  
			context.strokeStyle = gradient; 
			context.moveTo(this.startX,this.startY);
			context.lineTo(this.endX,this.endY);
			context.stroke();
			context.closePath();
		}
		this.clear=function(){
			
			var baseClearWidth = Math.abs((this.length)*Math.cos(this.oldAngle* Math.PI / 180));
			var baseClearHeight = Math.abs((this.length)*Math.sin(this.oldAngle* Math.PI / 180));
			var baseClearX = this.oldX-this.lineWidth/2*Math.cos((this.oldAngle-90)* Math.PI / 180);
			var baseClearY = this.oldY+this.lineWidth/2*Math.sin((this.oldAngle-90)* Math.PI / 180);

			baseClearWidth = baseClearWidth-this.lineWidth*Math.cos((this.oldAngle-90)* Math.PI / 180);
			baseClearHeight = baseClearHeight+this.lineWidth*Math.sin((this.oldAngle-90)* Math.PI / 180);
			context.strokeRect(baseClearX-baseClearWidth,baseClearY,baseClearWidth,baseClearHeight);
			
			//context.clearRect(0,0,canvas.width,canvas.height);
			
		}
		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();
					_.endX = Math.ceil(_.startX-_.length*Math.cos(angle* Math.PI / 180));
					_.endY = Math.ceil(_.startY-_.length*Math.sin(angle* Math.PI / 180));
					console.info("start:"+_.startX+"**"+_.startY);
					console.info("end:"+_.endX+"**"+_.endY);
					console.info("move:"+moveX+"**"+moveY);
					console.info("to:"+toX+"**"+toY);
					_.draw();
					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);
	
	var startX = 50;
	var startY = 50;
	var angle = 30;
	var endX = null;
	var endY = null;
	var lineWidth = 8;
	
	
	context.beginPath(); 
	var gradient = context.createLinearGradient(50, 50, 60, 60); 
	gradient.addColorStop(0, '#fdeff9'); 
	gradient.addColorStop(0.4, '#ec38bc'); 
	gradient.addColorStop(0.6, '#7303c0');
	gradient.addColorStop(1, '#03001e');  
	context.strokeStyle = gradient; 
	context.moveTo(50,50);
	context.lineTo(60,60);
	context.stroke();
	context.closePath();
	
}

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

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