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=[
			{
				distance:100,
				angle:270
			},
			{
				distance:120,
				angle:0
			}
		];

	function Arrow(startX,startY,angle,length,route){
		this.startX = startX;//箭头末端x坐标
		this.startY = startY;//箭头末端y坐标
		this.angle = angle;//箭头的角度
		this.length = length;//箭头的长度
		this.theta = 30;//箭头头部三角与箭头直线的夹角
		this.headlen = 11;//箭头头部斜边长度
		this.width = 8;//箭头线宽
		this.color = '#f36';//箭头颜色
		//this.distance = distance;//箭头移动长度
		this.route = route;
		this.af = null;
		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.clearRect(0,0,canvas.width,canvas.height);
			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.width; 
			context.stroke(); 
			context.closePath();
		}
		this.move=function(self){
				var _ =self;
				var i = 0;
				var item = _.route.shift();
				var angle = item.angle;
				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 = 1*Math.cos(angle* Math.PI / 180);
				var moveY = 1*Math.sin(angle* Math.PI / 180);
				var _move = function(){
					_.startX = _.startX-moveX;
					_.startY = _.startY-moveY;
					_.draw(angle);
					if((_.startX==toX)&&(_.startY==toY)){
						cancelAnimationFrame(_.af);
						if( _.route.length>0){
								_.move(_);
						}
					}else{
						_.af = requestAnimFrame(_move);
						
					}
				}
				_move();
			}
	}
	
	
	var arrow = new Arrow(400,10,180,28,route)
	arrow.move(arrow);
}

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

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