欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2023-12-04 14:54:52
这篇文章主要为大家详细介绍了html5 canvas实现跟随鼠标旋转的箭头，具有一定的参考价值，感兴趣的小伙伴们可以参考一下... 16-03-11...

本文实例为大家分享了

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

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

原文：

上一篇： html5使用Canvas绘图的使用方法

下一篇： 公共POI导出Excel方法详解

推荐阅读