• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html5 canvas实现跟随鼠标旋转的箭头

    本文实例为大家分享了

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

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

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

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

    以上就是本文的全部内容，希望对大家的学习有所帮助。

    原文：http://www.cnblogs.com/jone-chen/p/5243439.html

    上一篇：Html5 postMessage实现跨域消息传递
    下一篇：HTML5如何实现元素拖拽
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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