SOURCE

function Arrow(x,y,color,angle){
    this.x = x||0
    this.y = y||0
    this.color = color||"#ff0099"
    this.angle = angle||0
}

Arrow.prototype = {
    stroke:function(cxt){
        cxt.save()
        cxt.translate(this.x,this.y)
        cxt.rotate(this.angle)
        cxt.strokeStyle=this.color
        cxt.beginPath();
        cxt.moveTo(-20,-10)
        cxt.lineTo(0,-10)
        cxt.lineTo(0,-20)
        cxt.lineTo(20,0)
        cxt.lineTo(0,20)
        cxt.lineTo(0,10)
        cxt.lineTo(-20,10)
        cxt.closePath();
        cxt.stroke()
        cxt.restore()
    },
    fill:function(cxt){
        cxt.save()
        cxt.translate(this.x,this.y)
        cxt.rotate(this.angle)
        cxt.fillStyle=this.color
        cxt.beginPath();
        cxt.moveTo(-20,-10)
        cxt.lineTo(0,-10)
        cxt.lineTo(0,-20)
        cxt.lineTo(20,0)
        cxt.lineTo(0,20)
        cxt.lineTo(0,10)
        cxt.lineTo(-20,10)
        cxt.closePath();
        cxt.fill()
        cxt.restore()      
    }
}

function createPolygon(cxt,n,dx,dy,size){
    cxt.beginPath();
    var degree = (2*Math.PI)/n;
    for (var i=0;i<n;i++){
        var x = Math.cos(i*degree)
        var y = Math.sin(i*degree)
        cxt.lineTo(x*size+dx,y*size+dy);
    }
    cxt.closePath();
}

var c = document.getElementById("canvas");
var cxt = c.getContext("2d");
var txt = document.getElementById('txt')
var wid = '';

function demo1(){
    if(wid){
        window.cancelAnimationFrame(wid)
        cxt.clearRect(0,0,c.width,c.height);
    }
    var mouse = {x:0,y:0}
    c.onmousemove = function(ev){
        var e = ev||event;
        mouse.x = e.layerX;
        mouse.y = e.layerY;     
        txt.innerHTML="鼠标当前坐标为:("+mouse.x+","+mouse.y+")";
    };
}
function demo2(){
    if(wid){
        window.cancelAnimationFrame(wid)
        cxt.clearRect(0,0,c.width,c.height);
    }
    var x = c.width/2;
    var y = c.height/2;
    var mouse = {x:0,y:0}
    c.onmousemove = function(ev){
        var e = ev||event;
        mouse.x = e.layerX;
        mouse.y = e.layerY;     
    };
    (function frame(){
        wid = window.requestAnimationFrame(frame);
        cxt.clearRect(0,0,c.width,c.height);
        cxt.save()
        cxt.beginPath()
        cxt.moveTo(x,y)
        cxt.lineTo(mouse.x,mouse.y);
        cxt.closePath()
        cxt.strokeStyle="red"
        cxt.stroke()
        cxt.restore()
        var dx = mouse.x-x
        var dy = mouse.y-y;
        var distance = Math.sqrt(dx*dx+dy*dy)
        txt.innerHTML="鼠标于重点的距离为:"+distance;
    })(); 
}

function demo3(){
    if(wid){
        window.cancelAnimationFrame(wid)
        cxt.clearRect(0,0,c.width,c.height);
    }
    var mouse = {x:0,y:0}
    c.onmousemove = function(ev){
        var e = ev||event;
        mouse.x = e.layerX;
        mouse.y = e.layerY;     
    };
    var arrow = new Arrow(c.width/2,c.height/2);
    (function drawFrame(){
        wid =  window.requestAnimationFrame(drawFrame,c);
        cxt.clearRect(0,0,c.width,c.height);
        var dx = mouse.x-c.width/2;
        var dy = mouse.y-c.height/2;
        arrow.angle=Math.atan2(dy,dx);
        arrow.fill(cxt);
    })();
}

function demo4(){
    if(wid){
        window.cancelAnimationFrame(wid)
        cxt.clearRect(0,0,c.width,c.height);
    }
    var x=0,y=0,x1=0,y1=0;
    (function frame(){
        wid = window.requestAnimationFrame(frame);
        cxt.clearRect(0,0,c.width,c.height);
        cxt.beginPath()
        cxt.arc(20,x,20,0,360*Math.PI/180,true)
        cxt.closePath();
        cxt.fillStyle="#6699ff"
        cxt.fill()
        x+=2;
        cxt.beginPath()
        cxt.arc(60,y,20,0,360*Math.PI/180,true)
        cxt.closePath();
        cxt.fillStyle="#6699ff"
        cxt.fill()
        y+=3;
        cxt.beginPath()
        cxt.arc(100,x,20,0,360*Math.PI/180,true)
        cxt.closePath();
        cxt.fillStyle="#6699ff"
        cxt.fill()
        x1+=2;
        cxt.beginPath()
        cxt.arc(140,y,20,0,360*Math.PI/180,true)
        cxt.closePath();
        cxt.fillStyle="#6699ff"
        cxt.fill()
        y1+=2;
    })();
}

function demo5(){
    var n=4,x=10,y=10,s=10
    if(wid){
        window.cancelAnimationFrame(wid)
        cxt.clearRect(0,0,c.width,c.height);
    }
    window.addEventListener('keydown',function(){
        console.log("keydown")
        createPolygon(cxt,n,x,y,s) //修改n可以看效果
        cxt.fillStyle="HotPink"
    },false)
    window.addEventListener('keyup',function(){
        console.log("keyup")
        n+=1
        x+=50
        cxt.fill()
    },false)
}

console.log(Math.atan(1,2)*180/Math.PI,Math.atan(1,-2)*180/Math.PI)
console.log(Math.atan2(1,2)*180/Math.PI,Math.atan2(-1,-2)*180/Math.PI)

<canvas id="canvas" width="500" height="350" style="border:1px solid #000"></canvas>
<p id="txt"></p>
<div>
    <button onclick="demo1()">鼠标当前坐标</button>
    <button onclick="demo2()">两点间距离</button>
    <button onclick="demo3()">旋转箭头</button>
    <button onclick="demo4()">简单动画效果</button>
    <button onclick="demo5()">键盘up/down事件</button>
</div>