你的位置:首页 > 网页设计

[网页设计]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中的基本应用;