html5 canvas实现跟随鼠标旋转的箭头_html5教程技巧

本文实例为大家分享了

XML/HTML Code复制内容到剪贴板

1. nbsp;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