SOURCE

console 命令行工具 X clear

                    
>
console
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      || 
    window.msRequestAnimationFrame     ||  
    function( callback ){
    window.setTimeout(callback, 33);
  };
})();

var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
canvas.width = 838;
canvas.height = 423;
/*debugger
*/

/*
ctx:Canvas绘图环境
fromX, fromY:起点坐标(也可以换成p1,只不过它是一个数组)
toX, toY:终点坐标 (也可以换成p2,只不过它是一个数组)
theta:三角斜边一直线夹角
headlen:三角斜边长度
width:箭头线宽度
color:箭头颜色
*/
function drawArrow(ctx, fromX, fromY, toX, toY,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'; 
	// 计算各角度和对应的P2,P3坐标 
	var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI, 
			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.beginPath(); 
	var arrowX = fromX - topX, 
			arrowY = fromY - topY;
	//ctx.moveTo(arrowX, arrowY);
	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 = color; 
	ctx.lineWidth = width; 
	ctx.stroke();  
}

var startX = 10;
var endX = 38;
var startY = 100;
var endY = 110;
var arrowLength=28;

function animloop() {
  context.clearRect(0,0,canvas.width,canvas.height);
	if(endX>canvas.width){
		startX=10;
	}
	if(endY>canvas.height){
		startY=110;
	}
	endX = startX+arrowLength;
	endY = startY+arrowLength;
	drawArrow(context, startX, startY, endX,endY,30,11,8,'#f36');
	
	startX+=2;
	startY+=2;
  requestAnimFrame(animloop);
}

animloop();

<canvas id="canvas" >您的浏览器不支持canvas画布</canvas>
body{
  margin: 0;
  padding: 0;
	width:100vw;
	height:100vh;
}
canvas{
  position: absolute;
}