SOURCE

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      || 
    window.msRequestAnimationFrame     ||  
    function( callback ){
    window.setTimeout(callback, 2000);
  };
})();
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
canvas.width = 838;
canvas.height = 423;
var arrows =[]
function Arrow(startX,startY,angle,length,distance){
	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.draw=function(){
		var toX =this.startX-this.length*Math.cos(this.angle* Math.PI / 180),
				toY =this.startY-this.length*Math.sin(this.angle* Math.PI / 180),
				angle1 = (this.angle - this.theta) * Math.PI / 180, 
				angle2 = (this.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.save(); 
		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.restore(); 
	}
	this.move=function(){
		var moveX = this.distance*Math.cos(this.angle* Math.PI / 180);
	  var moveY = this.distance*Math.sin(this.angle* Math.PI / 180);
		this.startX = this.startX-moveX;
		this.startY = this.startY-moveY;
		if(this.startX>canvas.width){
			this.startX=canvas.width;
			if(this.angle==180){
				this.angle=this.angle-180;
			}else if(this.angle<180){
				this.angle=this.angle-90;
			}else{
				this.angle=this.angle+90;
			}
		}else if(this.startX<0){
			this.startX=0;
			if(this.angle==0){
				this.angle=this.angle+180;
			}else if(this.angle<90){
				this.angle=this.angle+90;
			}else{
				this.angle=this.angle-90;
			}
		}
		if(this.startY>canvas.height){
			this.startY=canvas.height;
			if(this.angle==270){
				this.angle=this.angle-180;
			}else if(this.angle<270){
				this.angle=this.angle-90;
			}else{
				this.angle=this.angle-270;
			}
		}else if(this.startY<0){
			this.startY=0;
			if(this.angle==90){
				this.angle=this.angle+180;
			}else if(this.angle<90){
				this.angle=this.angle+270;
			}else{
				this.angle=this.angle+90;
			}
		}
		
	}
}
/*
ctx：Canvas绘图环境
fromX, fromY：起点坐标（也可以换成p1，只不过它是一个数组）
arrowLength：箭头长度
angle: 箭头角度
theta：箭头三角斜边与箭头直线夹角
headlen：三角斜边长度
width：箭头线宽度
color：箭头颜色
*/
function drawArrow2(ctx, fromX, fromY,arrowLength,angle,theta,headlen,width,color) { 
	theta = typeof(theta) != 'undefined' ? theta : 30; 
	headlen = typeof(headlen) != 'undefined' ? headlen : 10; 
	width = typeof(width) != 'undefined' ? width : 1;
	color = typeof(color) != 'color' ? color : '#000'; 
	var toX =fromX-arrowLength*Math.cos(angle* Math.PI / 180),
			toY=fromY-arrowLength*Math.sin(angle* Math.PI / 180),
			angle1 = (angle - theta) * Math.PI / 180, 
			angle2 = (angle + theta) * Math.PI / 180, 
			topX = headlen * Math.cos(angle1), 
			topY = headlen * Math.sin(angle1), 
			botX = headlen * Math.cos(angle2), 
			botY = headlen * Math.sin(angle2);
	
	ctx.save(); 
	ctx.beginPath(); 
	var arrowX = null,arrowY = null;
	ctx.moveTo(fromX, fromY);
	ctx.lineTo(toX, toY); 
	arrowX = toX + topX; 
	arrowY = toY + topY; 
	ctx.moveTo(arrowX, arrowY); 
	ctx.lineTo(toX, toY); 
	arrowX = toX + botX; 
	arrowY = toY + botY; 
	ctx.lineTo(arrowX, arrowY); 
	ctx.strokeStyle = this.color; 
	ctx.lineWidth = this.width; 
	ctx.stroke(); 
	ctx.restore(); 
}

function animloop2() {
  context.clearRect(0,0,canvas.width,canvas.height);
	if(arrows.length==0){
		//for(var i=0;i<15;i++){
		//	arrows.push(new Arrow(Math.random()*838,Math.random()*423,Math.random()*180,28,3));
		//}
		arrows.push(new Arrow(500,200,130,28,3));
	}
	arrows.forEach(function(value,index){
		value.draw();
		value.move();
	})
  requestAnimFrame(animloop2);
}
//animloop2()
var x = 500;
var y = 200;
var angle = 270;
var lenght = 28;
var lineWidth = 8;
var headlen = 11;
var theta = 30;
var a = new Arrow(x,y,angle,lenght,3);
a.draw();
context.strokeStyle = '#347999';
context.lineWidth = 1;
var baseClearWidth = Math.abs((lenght)*Math.cos(angle* Math.PI / 180));
var baseClearHeight = Math.abs((lenght)*Math.sin(angle* Math.PI / 180));
var baseClearX = x-lineWidth/2*Math.cos((angle-90)* Math.PI / 180);
var baseClearY = y+lineWidth/2*Math.sin((angle-90)* Math.PI / 180);
var arrowWidth = headlen*Math.sin(theta* Math.PI / 180)*2;
var arrowHeight= headlen*Math.cos(theta* Math.PI / 180);

baseClearWidth = baseClearWidth-lineWidth*Math.cos((angle-90)* Math.PI / 180);
baseClearHeight = baseClearHeight+lineWidth*Math.sin((angle-90)* Math.PI / 180);
context.strokeRect(baseClearX-arrowWidth/2-baseClearWidth,baseClearY,baseClearWidth+arrowHeight,baseClearHeight+arrowWidth);

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

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