canvas实现跟随鼠标旋转的箭头 

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <title>canvas实现跟随鼠标旋转的箭头</title> 
  <style>
    *{padding: 0;margin: 0}
    </style> 
 </head> 
 <body> 
  <canvas width="500" height="500" style="border: 1px solid #555; display: block;margin: 0 auto;"></canvas> 
  <script>
        var arrow=function () {
            this.x=0; 
            this.y=0;
            this.color="#f90"
            this.rolation=0;
        } 
        var canvas=document.querySelector('canvas')
        var ctx=canvas.getContext('2d');
        arrow.prototype.draw=function (ctx) {
            ctx.save();
            ctx.translate(this.x,this.y);
            ctx.rotate(this.rolation)
            ctx.fillStyle=this.color;
            ctx.beginPath();
            ctx.moveTo(0, 15);
            ctx.lineTo(-50, 15);
            ctx.lineTo(-50, -15);
            ctx.lineTo(0,-15);
            ctx.lineTo(0,-35);
            ctx.lineTo(50,0);
            ctx.lineTo(0,35);
            ctx.closePath()
            ctx.fill();
            ctx.restore();
        }
        var Arrow=new arrow();
        Arrow.x=canvas.width/2;
        Arrow.y=canvas.height/2;
        
        var c_x,c_y; //相对于canvas坐标的位置；
        var isMouseDown=false;
        Arrow.draw(ctx)
        canvas.addEventListener('mousedown',function(e) {
            isMouseDown=true;
        },false)
        canvas.addEventListener('mousemove',function(e) {
            if(isMouseDown==true){
                c_x=getPos(e).x-canvas.offsetLeft;
                c_y=getPos(e).y-canvas.offsetTop;
                //setInterval(drawFram,1000/60)
                requestAnimationFrame(drawFram)
            }
        },false)
        canvas.addEventListener('mouseup',function(e) {
            isMouseDown=false;
        },false)
        function drawFram(){
            var dx=c_x-Arrow.x;
            var dy=c_y-Arrow.y;
            Arrow.rolation=Math.atan2(dy,dx);
            ctx.clearRect(0,0,canvas.width,canvas.height);
            Arrow.draw(ctx)
        }
        function getPos(e) {
            var mouse={x:0,y:0}
            var e=e||event;
     
            if(e.pageX||e.pageY){
                mouse.x=e.pageX;
                mouse.y=e.pageY;
            }else{
                mouse.x=e.pageX+document.body.scrollLeft+document.document.documentElement.scrollLeft;
                mouse.y=e.pageY+document.body.scrollTop+document.document.documentElement.scrollTop;
            }
            return mouse;
        }
    </script>  
 </body>
</html>

DEMO地址：http://codepen.io/jonechen/pen/eZpgWd

不废话，直接上DEMO了，这个效果实现起来并不复杂，但是麻雀随小，五脏俱全，主要涉及到的知识点有：

1、canvas的基本绘图；
2、js各个事件的监听；
3、js动画；
4、三角函数结合js在canvas中的基本应用；

posted @ 2016-03-04 21:05  Jone_chen  阅读(4731)  评论(0)  编辑  收藏  举报