简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  html5 canvas melaksanakan anak panah yang mengikuti kemahiran tutorial rotation_html5 tetikus

html5 canvas melaksanakan anak panah yang mengikuti kemahiran tutorial rotation_html5 tetikus

WBOY
WBOYasal
2016-05-16 15:51:422744semak imbas

Contoh dalam artikel ini dikongsi dengan semua orang

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >
  2. <html>
  3. <kepala>
  4. <meta charset="utf- 8" />
    5. " X-ua-serasi "
  5. Kandungan = " iaitu = tepi " /// > <tajuk>kanvas melaksanakan anak panah yang mengikuti putaran tetikus < ; /
    6. tajuk
  6. >  <gaya>
    7. *{padding: 0;margin: 0}
  7.  gaya>
    8.  
  9. kepala>
  10. <badan>
  11. <kanvas lebar=
    12. "500"
  12. tinggi="500" gaya="sempadan: 1px pepejal #555; paparan: blok; margin: 0 auto;">kanvas >  <skrip>
    13. var
  13. anak panah=fungsi () {
    14.  
  14. ini.x=0; 
  15. ini.y=0;  
    16. warna ini
  16. ="#f90"  
    17. 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;                                                            
    75. kembalikan tetikus;
    76.                                                               
  76.  
    77. skrip>
  77.   badan
    78. >
  78. html
    79. >
  79. Alamat DEMO: http://codepen.io/jonechen/pen/eZpgWd
    80. 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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Petua Tutorial X/HTML5 dan XHTML2_html5Artikel seterusnya：Petua Tutorial X/HTML5 dan XHTML2_html5

Artikel berkaitan

Lihat lagi