返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

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

2019-01-28 21:59:58丽君

本文实例为大家分享了

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>   <html>  
  2.  <head>       <meta charset="utf-8" />    
  3.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />       <title>canvas实现跟随鼠标旋转的箭头</title>    
  4.   <style>       *{padding: 0;margin: 0}   
  5.     </style>      </head>    
  6.  <body>       <canvas width="500" height="500" style="border: 1px solid #555; display: block;margin: 0 auto;"></canvas>    
  7.   <script>           var arrow=function () {   
  8.             this.x=0;                 this.y=0;   
  9.             this.color="#f90"               this.rolation=0;   
  10.         }             var canvas=document.querySelector('canvas')   
  11.         var ctx=canvas.getContext('2d');            arrow.prototype.draw=function (ctx) {   
  12.             ctx.save();                ctx.translate(this.x,this.y);   
  13.             ctx.rotate(this.rolation)                ctx.fillStyle=this.color;   
  14.             ctx.beginPath();                ctx.moveTo(0, 15);   
  15.             ctx.lineTo(-50, 15);                ctx.lineTo(-50, -15);   
  16.             ctx.lineTo(0,-15);                ctx.lineTo(0,-35);   
  17.             ctx.lineTo(50,0);                ctx.lineTo(0,35);   
  18.             ctx.closePath()                ctx.fill();   
  19.             ctx.restore();            }   
  20.         var Arrow=new arrow();            Arrow.x=canvas.width/2;   
  21.         Arrow.y=canvas.height/2;               
  22.         var c_x,c_y; //相对于canvas坐标的位置；            var isMouseDown=false;   
  23.         Arrow.draw(ctx)            canvas.addEventListener('mousedown',function(e) {   
  24.             isMouseDown=true;            },false)   
  25.         canvas.addEventListener('mousemove',function(e) {                if(isMouseDown==true){   
  26.                 c_x=getPos(e).x-canvas.offsetLeft;                    c_y=getPos(e).y-canvas.offsetTop;   
  27.                 //setInterval(drawFram,1000/60)                    requestAnimationFrame(drawFram)   
  28.             }            },false)   
  29.         canvas.addEventListener('mouseup',function(e) {                isMouseDown=false;   
  30.         },false)            function drawFram(){   
  31.             var dx=c_x-Arrow.x;                var dy=c_y-Arrow.y;   
  32.             Arrow.rolation=Math.atan2(dy,dx);                ctx.clearRect(0,0,canvas.width,canvas.height);   
  33.             Arrow.draw(ctx)            }   
  34.         function getPos(e) {                var mouse={x:0,y:0}   
  35.             var ee=e||event;            
  36.             if(e.pageX||e.pageY){                    mouse.x=e.pageX;   
  37.                 mouse.y=e.pageY;                }else{   
  38.                 mouse.x=e.pageX+document.body.scrollLeft+document.document.documentElement.scrollLeft;                    mouse.y=e.pageY+document.body.scrollTop+document.document.documentElement.scrollTop;   
  39.             }                return mouse;   
  40.         }        </script>     
  41.  </body>   </html>  
相关文章 大家在看