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;
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';
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(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;
}