html5 canvas melaksanakan anak panah yang mengikuti kemahiran tutorial rotation_html5 tetikus

Contoh dalam artikel ini dikongsi dengan semua orang

Kod XML/HTMLSalin kandungan ke papan keratan

1. /span>>
2. html>
3. kepala>
4. meta charset="utf- 8" />
" X-ua-serasi "
5. Kandungan = " iaitu = tepi " /// > tajuk>kanvas melaksanakan anak panah yang mengikuti putaran tetikus < ; /
tajuk
6. >  gaya>
*{padding: 0;margin: 0}
7.  gaya>
 
9. kepala>
10. badan>
11. kanvas lebar=
"500"
12. tinggi="500" gaya="sempadan: 1px pepejal #555; paparan: blok; margin: 0 auto;">kanvas >  skrip>
var
13. anak panah=fungsi () {
 
14. ini.x=0; 
15. ini.y=0;  
warna ini
16. ="#f90"  
peranan ini
17. =0;  }    
18.         var kanvas=dokumen.querySelector('kanvas')   >
19.         var ctx=kanvas.getContext('2d');   
20.         arrow.prototype.draw=fungsi (ctx) {   
21.             ctx.save();   
22.             ctx.translate(this.x,this.y);   
23.              ctx.rotate(this.rolation)   
24.             ctx.fillStyle=ini.warna;   
25.             ctx.beginPath();   
26.             ctx.moveTo(0, 15);   
27.             ctx.lineTo(-50, 15);   
28.             ctx.lineTo(-50, -15);   
29.             ctx.lineTo(0,-15);   
30.             ctx.lineTo(0,-35);   
31.             ctx.lineTo(50,0);   
32.             ctx.lineTo(0,35);   
33.             ctx.closePath()   
34.             ctx.fill();   
35.             ctx.restore();   
36.         }   
37.         var Anak panah=baharu anak panah();   
38.         Anak panah.x=kanvas.lebar/2;   
39.         Arrow.y=kanvas.height/2;   
40.            
41.         var c_x,c_y; //相对于canvas坐标的位置；   
42.         var isMouseDown=palsu;   
43.         Arrow.draw(ctx)   
44.         canvas.addEventListener('mousedown', function(e) {   
45.              isMouseDown=benar;   
46.         },salah)   
47.         canvas.addEventListener('mousemove', function(e) {   
48.              jika(isMouseDown==benar){   
49.                 c_x=getPos(e).x-canvas.offsetLeft;   
50.                 c_y=getPos(e).y-canvas.offsetTop;   
51.                 //setInterval(drawFram,1000/60)   
52.                 permintaanAnimationFrame(drawFram)   
53.             }   
54.         }, salah)   
55.         canvas.addEventListener('mouseup', function(e) {   
56.             isMouseDown=palsu;   
57.         }, salah)   
58.         fungsi drawFram(){   
59.              var dx=c_x-Arrow.x;   
60.              var dy=c_y-Arrow.y;   
61.             Arrow.rolation=Math.atan2(dy,dx);   
62.              ctx.clearRect(0,0,canvas.width,canvas.height);   
63.             Anak panah.draw(ctx)   
64.         }   
65.         fungsi getPos(e) {   
66.              var tetikus={x:0,y:0}   
67.              var ee=e||acara;   
68.         
69.             jika(e.pageX||e.pageY){   
70.                 tetikus.x=e.pageX;   
71.                 mouse.y=e.pageY;   
72.             }lain{
73. tetikus.x=e.pageX document.body.scrollLeft document.document.documentElement.scrollLeft;
74. mouse.y=e.pageY document.body.scrollTop document.document.documentElement.scrollTop;                                                            
kembalikan tetikus;
                                                              
76.  
77. skrip
>
78.   badan
>
79. html
>
80. Alamat DEMO: http://codepen.io/jonechen/pen/eZpgWd
Bukan omong kosong, mari terus ke DEMO Kesan ini tidak rumit untuk dicapai, tetapi ia adalah sekecil burung pipit dan mempunyai semua organ dalaman yang terlibat adalah:

1. Lukisan asas kanvas; 2. Pemantauan pelbagai acara js;

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

Teks asal: http://www.cnblogs.com/jone-chen/p/5243439.html