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

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

"UTF-8"
4. > html5 contoh kemasukan bola boleh alih lukisan kanvas
"moveBall(acara)"
6. >
"myCanvas"
8. lebar=
"400px"
9. tinggi=
"300px"
10. style="sempadan: 1px merah pepejal;"> Pelayar anda tidak menyokong teg kanvas.
"teks/javascript"> //Dapatkan objek Kanvas (kanvas)
var
14. kanvas = document.getElementById("myCanvas");
15. //Mewakili kelas sfera
16. fungsi
Bola(x, y ,jejari, kelajuan){
17. ini
.x = x || 10; 🎜>
18. ini.y = y || 10; 🎜>
19. ini.jejari = radius || 10; > ini
.kelajuan = kelajuan || 5; 🎜>
20.   //Naik
21. ini.moveUp = fungsi
(){
23. ini.y -= ini
.kelajuan
24.  jika(ini
.y < .radius){
25. //Cegah melebihi sempadan atas
                                                                                                                                                                                                               
26.                                                                };   //Bergerak ke kanan
27. ini
.moveRight =
28. fungsi(){ ini
.x =
29. ini
.kelajuan;
var
31. maxX = canvas.width -
ini
32. .jejari
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){
//Cegah melebihi sempadan kiri
42.  
ini
43. .x = ini.jejari;                                                                
};
 
46. //Bergerak ke bawah
47. ini
.moveDown =
48. fungsi(){ ini
.y =
49. ini.laju var
maxY = canvas.height -
50. ini.jejari jika
(
51. ini.y > maxY){ //Cegah melebihi sempadan bawah
52. ini
.y = maxY;
53.                                                                };
54. }
//Lukis bola
58. fungsi drawBola(bola){
59.  jika(
jenis
60. ctx != "tidak ditentukan"){ ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2,
false
62. ctx.fill(); }
63. }
65. //Kosongkan kanvas
66. fungsi clearCanvas(){
67.  jika(jenis ctx != "tidak ditentukan"){
68. ctx.clearRect(0, 0, 400, 300);
}
}
72. var bola = baharu Bola();
//Cukup mengesan sama ada penyemak imbas semasa menyokong objek Canvas untuk mengelakkan ralat sintaks dalam sesetengah penyemak imbas yang tidak menyokong html5
jika
74. (canvas.getContext){ 
//Dapatkan objek CanvasRenderingContext2D (berus) yang sepadan
var
76. ctx = canvas.getContext("2d"); drawBola(bola);
}
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. kes 38: //Kekunci arah atas  
ball.moveUp();
87. rehat;  
kes
88. 39: //Kekunci anak panah kanan   bola.moveRight();
rehat
90. ;  kes
40: 
91. //Kekunci anak panah ke bawah bola.moveDown();
92. rehat
;
93.  lalai: 
//Operasi utama lain tidak bertindak balas
94. kembali;
95. }  
96. clearCanvas();
//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):
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.
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({   >
        nod: hidung,   
        tempoh: 1,   
        pelonggaran: Kinetik.Pelonggaran.ElastikKeluar,   
        y: -100,   
        mata: [220, 280, sw/2, 200, sw-220,280]   
      });    
  
      
88. var mouthTween = baharu Kinetic.Tween({   
        nod: mulut,   
        tempoh: 1,   
        pelonggaran: Kinetik.Pelonggaran.ElastikKeluar,   
        mata: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]   
      });    
  
      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