masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > Berkongsi contoh penggunaan HTML5 Canvas untuk mencipta animasi papan kekunci dan tetikus_html5 kemahiran tutorial

Berkongsi contoh penggunaan HTML5 Canvas untuk mencipta animasi papan kekunci dan tetikus_html5 kemahiran tutorial

WBOY
Lepaskan： 2016-05-16 15:45:44
asal
2334 orang telah melayarinya

Papan kekunci mengawal pergerakan bola

Seperti yang kita semua tahu, animasi yang kita lihat sebenarnya adalah satu siri penukaran pantas imej statik, yang memberikan mata kasar kesan visual "imej bergerak" disebabkan imej selepas visual. Selepas memahami perkara ini, melukis kesan animasi pada kanvas menjadi agak mudah. Kita hanya perlu mengosongkan grafik statik tertentu dahulu, dan kemudian lukis semula di lokasi lain Ulangi ini untuk membuat grafik statik bergerak mengikut trajektori tertentu untuk menghasilkan kesan animasi.

Seterusnya, kami melukis bola padu pada kanvas, dan kemudian menggunakan kekunci anak panah pada papan kekunci untuk mengawal pergerakan bola untuk menghasilkan kesan dinamik. Kod sampel adalah seperti berikut:

Kod JavaScriptSalin kandungan ke papan keratan
    4. "UTF-8"
  4. > html5 contoh kemasukan bola boleh alih lukisan kanvas
    6. "moveBall(acara)"
  6. >
    8. "myCanvas"
  8. lebar=
    9. "400px"
  9. tinggi=
    10. "300px"
  10. style="sempadan: 1px merah pepejal;"> Pelayar anda tidak menyokong teg kanvas.
    13. "teks/javascript"> //Dapatkan objek Kanvas (kanvas)
    14. var
  14. kanvas = document.getElementById("myCanvas");
  15. //Mewakili kelas sfera
  16. fungsi
    17. Bola(x, y ,jejari, kelajuan){
  17. ini
    18. .x = x || 10; 🎜>
  18. ini.y = y || 10; 🎜>
  19. ini.jejari = radius || 10; > ini
    20. .kelajuan = kelajuan || 5; 🎜>
  20.   //Naik
  21. ini.moveUp = fungsi
    22. (){
  23. ini.y -= ini
    24. .kelajuan
  24.  jika(ini
    25. .y < .radius){
  25. //Cegah melebihi sempadan atas
    26.                                                                                                                                                                                                                
  26.                                                                };   //Bergerak ke kanan
  27. ini
    28. .moveRight =
  28. fungsi(){ ini
    29. .x =
  29. ini
    30. .kelajuan;
    31. var
  31. maxX = canvas.width -
    32. ini
  32. .jejari
    33. jika
  33. (ini.x > maxX){  //Cegah melebihi sempadan yang betul
  34.  ini.x = maxX; 
  35. }
  36. };
  37.  
  38. //Bergerak ke kiri
  39. ini.moveLeft = fungsi(){
  40. ini.x -= ini.kelajuan
  41.  jika(ini.x < .radius){
    42. //Cegah melebihi sempadan kiri
  42.  
    43. ini
  43. .x = ini.jejari;                                                                
    44. };
    45.  
  46. //Bergerak ke bawah
  47. ini
    48. .moveDown =
  48. fungsi(){ ini
    49. .y =
  49. ini.laju var
    50. maxY = canvas.height -
  50. ini.jejari jika
    51. (
  51. ini.y > maxY){ //Cegah melebihi sempadan bawah
  52. ini
    53. .y = maxY;
  53.                                                                };
  54. }
    57. //Lukis bola
  58. fungsi drawBola(bola){
  59.  jika(
    60. jenis
  60. ctx != "tidak ditentukan"){ ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2,
    61. false
  62. ctx.fill(); }
  63. }
  65. //Kosongkan kanvas
  66. fungsi clearCanvas(){
  67.  jika(jenis ctx != "tidak ditentukan"){
  68. ctx.clearRect(0, 0, 400, 300);
    69. }
    70. }
  72. var bola = baharu Bola();
    73. //Cukup mengesan sama ada penyemak imbas semasa menyokong objek Canvas untuk mengelakkan ralat sintaks dalam sesetengah penyemak imbas yang tidak menyokong html5
    74. jika
  74. (canvas.getContext){ 
    75. //Dapatkan objek CanvasRenderingContext2D (berus) yang sepadan
    76. var
  76. ctx = canvas.getContext("2d"); drawBola(bola);
    77. }
  78. //Fungsi pengendali panggilan balik untuk acara onkeydown
  79. //Kawal pergerakan bola mengikut kekunci pengguna
  80. fungsi moveBall(acara){
  81. tukar(event.keyCode){
  82.  kes 37: //Kekunci anak panah kiri  
  83. bola.moveLeft();
  84. rehat;
    85.  
  85. kes 38: //Kekunci arah atas  
    86. ball.moveUp();
  87. rehat;  
    88. kes
  88. 39: //Kekunci anak panah kanan   bola.moveRight();
    90. rehat
  90. ;  kes
    91. 40: 
  91. //Kekunci anak panah ke bawah bola.moveDown();
  92. rehat
    93. ;
  93.  lalai: 
    94. //Operasi utama lain tidak bertindak balas
  94. kembali;
  95. }  
  96. clearCanvas();
    97. //Kosongkan kanvas dahulu
  98. drawBall(bola); //Lukis bola terkini
  99. }
  101. Sila gunakan penyemak imbas yang menyokong HTML5 untuk membuka halaman web berikut untuk melihat kesan sebenar (gunakan kekunci anak panah untuk bergerak):
    102. Gunakan kanvas untuk melukis bola boleh alih
  102. .
  103. Clown SmileyAnda hanya perlu memahami beberapa API dan kemudian menggunakan parameter animasi yang diperlukan untuk mencipta animasi web yang menarik ini yang boleh bertindak balas kepada pergerakan anda.
    104. Langkah pertama ialah melukis ciri muka
Badut ini tidak mempunyai telinga dan kening, jadi hanya tinggal tiga organ, tetapi kita perlu menarik dua matanya secara berasingan, jadi ada empat bahagian semuanya. Mari kita lihat kodnya dahulu.

Kod untuk melukis mata kiri

Kod JavaScript
Salin kandungan ke papan keratan

  1. var leftEye = baharu Kinetic.Line({
  2. x: 150,
  3. mata: [0, 200, 50, 190, 100, 200, 50, 210],
  4. ketegangan: 0.5,
  5. ditutup: benar,
  6. strok: 'putih',
  7. lejangLebar: 10
  8. });

Kod untuk melukis mata kanan

Kod JavaScriptSalin kandungan ke papan keratan
  1. var rightEye = baharu Kinetic.Line({
  2. x: sw - 250,
  3. mata: [0, 200, 50, 190, 100, 200, 50, 210],
  4. ketegangan: 0.5,
  5. ditutup: benar,
  6. strok: 'putih',
  7. lejangLebar: 10
  8. });

Kod untuk melukis hidung

Kod JavaScriptSalin kandungan ke papan keratan
  1. var hidung = baharu Kinetic.Line({
  2. mata: [240, 280, sw/2, 300, sw-240,280],
  3. ketegangan: 0.5,
  4. ditutup: benar,
  5. strok: 'putih',
  6. lejangLebar: 10
  7. });

Kod untuk melukis mulut

Kod JavaScriptSalin kandungan ke papan keratan
  1. var mulut = baharu Kinetic.Line({
  2. mata: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
  3. ketegangan: 0.5,
  4. ditutup: benar,
  5. strok: 'merah',
  6. lejangLebar: 10
  7. });

Adakah anda berasa kecewa? Ternyata ia hanya beberapa baris kod. Ya, semudah itu saya percaya anda mula yakin bahawa anda boleh menjadi pengaturcara animasi permainan web

Terangkan secara ringkas kod di atas. Kinetik ialah kit alat js yang kami gunakan. Di kepala halaman, kita perlu merujuknya seperti ini:

Kod JavaScriptSalin kandungan ke papan keratan
  1. var mulut = baharu Kinetic.Line({
  2. mata: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
  3. ketegangan: 0.5,
  4. ditutup: benar,
  5. strok: 'merah',
  6. lejangLebar: 10
  7. });

Yang lain ialah beberapa perkara utama, keanjalan garisan, warna, lebar, dsb. Ini mudah difahami.

Langkah kedua ialah membuat gambar bergerak

Sebab animasi ini menarik ialah ia boleh bertindak balas kepada pergerakan tetikus anda dan berinteraksi dengan pengguna Ini adalah aspek paling kritikal bagi animasi yang berjaya. Jika diperhatikan dengan teliti, perubahan pada raut wajah badut itu hanyalah perubahan bentuk Mata menjadi lebih besar, mulut menjadi lebih besar, dan hidung menjadi lebih besar satu peralihan. Terdapat beberapa algoritma di dalamnya. Ini adalah bahagian yang paling membimbangkan. Mujurlah, teknologi algoritma ini sangat matang dan tidak memerlukan kita memikirkannya Perpustakaan enjin animasi ini telah merangkum teknologi ini ke dalam antara muka yang sangat mudah dan mudah. Mari kita lihat cara untuk menggerakkan sesuatu.

Animasi mata kiri

Kod JavaScriptSalin kandungan ke papan keratan
  1. var leftEyeTween = baharu Kinetik.Tween({
  2. nod: leftEye,
  3. tempoh: 1,
  4. pelonggaran: Kinetic.Easings.ElasticEaseOut,
  5. y: -100,
  6. mata: [0, 200, 50, 150, 100, 200, 50, 200]
  7. });

Animasi mata kanan

Kod JavaScriptSalin kandungan ke papan keratan
  1. var rightEyeTween = baharu Kinetic.Tween({
  2. nod: rightEye,
  3. tempoh: 1,
  4. pelonggaran: Kinetic.Easings.ElasticEaseOut,
  5. y: -100,
  6. mata: [0, 200, 50, 150, 100, 200, 50, 200]
  7. });

Animasi hidung

Kod JavaScriptSalin kandungan ke papan keratan
  1. var noseTween = baharu Kinetik.Tween({
  2. nod: hidung,
  3. tempoh: 1,
  4. pelonggaran: Kinetic.Easings.ElasticEaseOut,
  5. y: -100,
  6. mata: [220, 280, sw/2, 200, sw-220,280]
  7. });

Animasi mulut

Kod JavaScriptSalin kandungan ke papan keratan
  1. var mouthTween = baharu Kinetic.Tween({
  2. nod: mulut,
  3. tempoh: 1,
  4. pelonggaran: Kinetic.Easings.ElasticEaseOut,
  5. mata: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
  6. });

Kod ini sangat mudah dan nama pembolehubah adalah jelas. Ia sepatutnya tidak sukar bagi pengaturcara yang mempunyai sedikit pengalaman untuk memahami kod ini. Pada asasnya setiap kod membolehkan anda memberikan beberapa titik untuk menentukan mod pereputan dan tempoh tindakan animasi.

Kod animasi lengkap

Kod JavaScriptSalin kandungan ke papan keratan
  1.   
  2.   
  3.      
  4.        
  5.   
      
  6.      
  7.     
    "container">
      
  8.     "/js/lib/kinetic-v5.0.1.min.js">   
  9.     "tunda">   
  10.       var sw = 578;   
  11.       var sh = 400;   
  12.       var peringkat = baharu Kinetik.Peringkat({   
  13.         bekas: 'bekas',   
  14.         lebar: 578,   
  15.         tinggi: 400   
  16.       });   
  17.       var lapisan = baharu Kinetik.Lapisan({   
  18.         y: -30    
  19.       });   
  20.   
  21.       var leftEye = baharu Kinetic.Line({   
  22.         x: 150,   
  23.         mata: [0, 200, 50, 190, 100, 200, 50, 210],   
  24.         ketegangan: 0.5,   
  25.         ditutup: benar,   
  26.         strok: 'putih',   
  27.         lebar lejang: 10        
  28.       });   
  29.   
  30.       var rightEye = baharu Kinetic.Line({   
  31.         x: sw - 250,   
  32.         mata: [0, 200, 50, 190, 100, 200, 50, 210],   
  33.         ketegangan: 0.5,   
  34.         ditutup: benar,   
  35.         strok: 'putih',   
  36.         lebar lejang: 10      
  37.       });   
  38.   
  39.       var nose = baharu Kinetic.Line({   
  40.         mata: [240, 280, sw/2, 300, sw-240,280],   
  41.         ketegangan: 0.5,   
  42.         ditutup: benar,   
  43.         strok: 'putih',   
  44.         lebar lejang: 10   
  45.       });   
  46.   
  47.       var mulut = baharu Kinetic.Line({   
  48.         mata: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],   
  49.         ketegangan: 0.5,   
  50.         ditutup: benar,   
  51.         strok: 'merah',   
  52.         lebar lejang: 10   
  53.       });   
  54.   
  55.       layer.add(leftEye)   
  56.             .tambah(mata kanan)   
  57.             .tambah(hidung)   
  58.            .tambah(mulut);   
  59.   
  60.       peringkat.tambah(lapisan);   
  61.   
  62.       // remaja   
  63.   
  64.       var leftEyeTween = baharu Kinetic.Tween({   >
  65.         nod: mata kiri,   
  66.         tempoh: 1,   
  67.         pelonggaran: Kinetik.Pelonggaran.ElastikKeluar,   
  68.         y: -100,   
  69.         mata: [0, 200, 50, 150, 100, 200, 50, 200]   
  70.       });    
  71.   
  72.       var rightEyeTween = baharu Kinetic.Tween({   >
  73.         nod: mata kanan,   
  74.         tempoh: 1,   
  75.         pelonggaran: Kinetik.Pelonggaran.ElastikKeluar,   
  76.         y: -100,   
  77.         mata: [0, 200, 50, 150, 100, 200, 50, 200]   
  78.       });   
  79.   
  80.       var noseTween = baharu Kinetic.Tween({   >
    81.         nod: hidung,   
    82.         tempoh: 1,   
    83.         pelonggaran: Kinetik.Pelonggaran.ElastikKeluar,   
    84.         y: -100,   
    85.         mata: [220, 280, sw/2, 200, sw-220,280]   
    86.       });    
    87.   
    88.       
  88. var mouthTween = baharu Kinetic.Tween({   
    89.         nod: mulut,   
    90.         tempoh: 1,   
    91.         pelonggaran: Kinetik.Pelonggaran.ElastikKeluar,   
    92.         mata: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]   
    93.       });    
    94.   
    95.       stage.getContainer().addEventListener(
  95. 'mouseover', fungsi() {    🎜>         leftEyeTween.play();   
  96.         rightEyeTween.play();   
  97.         noseTween.play();   
  98.         mouthTween.play();   
  99.       });   
  100.   
  101.       stage.getContainer().addEventListener(
  102. 'mouseout', fungsi() {    🎜>         leftEyeTween.reverse();   
  103.         rightEyeTween.reverse();   
  104.         noseTween.reverse();   
  105.         mouthTween.reverse();   
  106.       });   
  107.   
  108.        
  109.      
  110.   

  111. Sehen Sie sich die Demo an

Label berkaitan：
canvas html5 动画
sumber：php.cn
Artikel sebelumnya：HTML5 animasi hayunan pakaian 3D kesan khas_html5 kemahiran tutorial Artikel seterusnya：Terokai petua untuk menggunakan fungsi storan setempat HTML5
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Isu terkini
Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman? Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan NASAAPI. Foto-foto i...
daripada 2024-04-06 15:33:12
0
1
433
Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
daripada 2024-04-05 12:57:00
0
1
456
Apakah perbezaan antara enctype dan formenctype dalam HTML5? Saya hanya tertanya-tanya apakah perbezaan antara atribut enctype dan formenctype dalam HT...
daripada 2024-04-02 11:47:56
0
1
275
Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....
daripada 2024-04-01 20:42:38
0
1
259
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan