星空网 > 软件开发 > 网页设计

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中的基本应用;




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

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

第三方卖家:https://www.goluckyvip.com/tag/3496.html
九仓海外仓:https://www.goluckyvip.com/tag/34960.html
九方通逊:https://www.goluckyvip.com/tag/34961.html
九方通逊物流:https://www.goluckyvip.com/tag/34962.html
九方物流:https://www.goluckyvip.com/tag/34963.html
九江综试区:https://www.goluckyvip.com/tag/34964.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流