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
			}
		];
	var route1=[
			{
				startX:400,
				startY:10,
				distance:200,
				angle:270
			},
			{
				startX:400,
				startY:240,
				distance:120,
				angle:180
			},
			{
				startX:520,
				startY:140,
				distance:80,
				angle:270
			}
		];


	function Arrow(length,route,infinite){
		this.startX = null;//箭头末端x坐标
		this.oldX = null;
		this.startY = null;//箭头末端y坐标
		this.oldY = null;
		this.length = length;//箭头的长度
		this.theta = 30;//箭头头部三角与箭头直线的夹角
		this.headlen = 11;//箭头头部斜边长度
		this.lineWidth = 8;//箭头线宽
		this.color = '#f36';//箭头颜色
		this.speed = 3;
		this.oldAngle=null;
		this.route = route;
		this.cloneRoute = $.extend(true,[],route);
		this.af = null;
		this.infinite = infinite;
		this.arrowWidth = this.headlen*Math.sin(this.theta* Math.PI / 180)*2;//箭头的宽度
		this.arrowHeight= this.headlen*Math.cos(this.theta* Math.PI / 180);//箭头的高度
		
		
		this.draw=function(angle){
			var toX =this.startX-this.length*Math.cos(angle* Math.PI / 180),
					toY =this.startY-this.length*Math.sin(angle* Math.PI / 180),
					angle1 = (angle - this.theta) * Math.PI / 180, 
					angle2 = (angle + this.theta) * Math.PI / 180, 
					topX = this.headlen * Math.cos(angle1), 
					topY = this.headlen * Math.sin(angle1), 
					botX = this.headlen * Math.cos(angle2), 
					botY = this.headlen * Math.sin(angle2);
			
			context.beginPath(); 
			var arrowX = null,arrowY = null;
			context.moveTo(this.startX, this.startY);
			context.lineTo(toX, toY); 
			arrowX = toX + topX; 
			arrowY = toY + topY; 
			context.moveTo(arrowX, arrowY); 
			context.lineTo(toX, toY); 
			arrowX = toX + botX; 
			arrowY = toY + botY; 
			context.lineTo(arrowX, arrowY); 
			context.strokeStyle = this.color; 
			context.lineWidth = this.lineWidth; 
			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);
			
			//context.clearRect(0,0,canvas.width,canvas.height);
			
			if(this.oldAngle===0){
				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.clearRect(baseClearX-baseClearWidth-this.arrowHeight,baseClearY-this.arrowWidth/2,baseClearWidth+this.arrowHeight,baseClearHeight+this.arrowWidth);
			}else if(this.oldAngle<90){
					
			}else if(this.oldAngle===90){
				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.clearRect(baseClearX-this.arrowWidth/2,baseClearY-this.arrowHeight-baseClearHeight,baseClearWidth+this.arrowHeight,baseClearHeight+this.arrowWidth);
			}else if(this.oldAngle<180){			
				
			}else if(this.oldAngle===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.clearRect(baseClearX,baseClearY-baseClearHeight-this.arrowWidth/2,baseClearWidth+this.arrowHeight,baseClearHeight+this.arrowWidth);
			}else if(this.oldAngle<270){
			
			}else if(this.oldAngle===270){
				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.clearRect(baseClearX-this.arrowWidth/2-baseClearWidth+1,baseClearY,baseClearWidth+this.arrowHeight,baseClearHeight+this.arrowWidth);
			}else if(this.oldAngle<360){
				context.clearRect(this.oldX-width,this.oldY,width,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(){
					console.info("old:"+_.oldX+"--"+_.oldY+"---"+_.oldAngle);
					console.info("current"+_.startX+"--"+_.startY+"---"+_.angle);
					_.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 arrow = new Arrow(28,route,true);
	arrow.move(arrow);
	setTimeout(function(){
		var arrow2 = new Arrow(28,route,true);
		arrow2.move(arrow2);
	},500)
	
/*	var arrow1 = new Arrow(28,route1,true);
	arrow1.move(arrow1);
	setTimeout(function(){
		var arrow3 = new Arrow(28,route1,true);
		arrow3.move(arrow3);
	},500)*/

}

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

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