html5 canvas實作跟隨滑鼠旋轉的箭頭_html5教學技巧

本文實例為大家分享了

XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3.  head>    
4.   meta charset charset />    
5.   meta http-equiv -UA-Compatible" content="IE=edge" "IE=edge" 
6.        title>canvastitle>    
7.   style>  
8.     *{padding: 0;margin: 0}   
9.     style>    
10.  head>    
11.       身體
>
12.        canvas width width 🎜> height="500" style >"border: 1px solid #555; display: block;margin: 0 auto;">>
13. >can| >       
14. script>           var 
15. arrow=function=function=
16.             this.x=0=
            this.y=0=0
17. =0            this.color=
"#f90"
18. ="#f90"=            this.rolation=0=0=         }    
19.         var 營業=文件=
文件
20. =文檔         var ctx=
canvas
21. =canvas=canvas=
canvas
22. =
canvas
23. =
canvas
24. =
canvas
25. =canvas=canvas
        
26. arrow.prototype.draw
=
            ctx.save();   
            ctx.translate(this.x,this.y);   
            ctx.rotate(this.rolation)   
            
31. ctx.fillStyle
=
32. 這
=
33. 這這樣   
34.             ctx.beginPath();   
35.             ctx.moveTo(0, 15);   
36.             ctx.lineTo(-50, 15);   
37.             ctx.lineTo(-50, -15);   
38.             ctx.lineTo(0,-15);                ctx.lineTo(0,-35);                ctx.lineTo(50,0);   
39.             ctx.lineTo(0,35);                ctx.closePath()                ctx.fill();   
40.             ctx.restore();            }            var 
41. 箭頭=
42. 新=
43. 新=新 箭頭();            
44. Arrow.x=
45. 透明度=
46. 透明度=透明度.=透明度.=
47. 透明度.=透明度=透明度.            Arrow.y=身高.height/2;                        var c_x,c_y; //相對於canvas座標的位置；            var isMouseDown=false=false;            Arrow.draw(ctx)            canvas.addEventListener('mousedown',function(e) {                isMouseDown=true;            }，假）  
48.         canvas.addEventListener('mousemove',function(e) {   
49.             if(isMouseDown==true){   
50. ==true){    ==true){                    c_x
=   
51.                 c_y=c_y
=                 //setInterval(drawFram,1000/60)   
                requestAnimationFrame(drawFram)   
            }   
        }，假)   
        canvas.addEventListener('mouseup',function(e) {   
56.             isMouseDown=false
=
57. false
=
58. false
=
59. false=false=點   
60.         }，假)            函數drawFram(){                var 
dx
61. =c_x-Arrow.x;                var 
dy
62. =
            Arrow.rolation
63. =
數學
64. .atan2(dy,dx);   
65.             ctx.clearRect(0,0,canvas.width,canvas.height);                Arrow.draw(ctx)   
66.         }            函數 getPos(e) {   
            var 
67. 滑鼠
={x:0,y:0}  
68. ={x:0,y:0} 
            var 
69. eee
e
70.         
            if(e.pageX||e.pageY){   
71.                 mouse.x=e.pageX;                    mouse.y=e.pageY;                }else{   
72.                 mouse.x=c. >
                
73. mouse.y=c. >             }   
74.             return mouse;   
75.         }   
76.     
77. script>    >    
78.  body>  
79. 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