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 //Cegah melebihi sempadan atas                                                                                                                                                                                                                
25.                                                                };   //Bergerak ke kanan
26. ini
.moveRight =
27. fungsi(){ ini
.x =
28. ini
.kelajuan;
var
30. maxX = canvas.width -
ini
31. .jejari
jika
32. (ini.x > maxX){  
//Cegah melebihi sempadan yang betul
33.  ini.x = maxX; 
34. }
35. };
36.  
37. //Bergerak ke kiri
38. ini.moveLeft = fungsi(){
39. ini.x -= ini.kelajuan
40.  jika(ini.x
//Cegah melebihi sempadan kiri
41.  
ini
42. .x = ini.jejari;                                                                
};
 
45. //Bergerak ke bawah
46. ini
.moveDown =
47. fungsi(){ ini
.y =
48. ini.laju var
maxY = canvas.height -
49. ini.jejari jika
(
50. ini.y > maxY){ //Cegah melebihi sempadan bawah
51. ini
.y = maxY;
52.                                                                };
53. }
//Lukis bola
57. fungsi drawBola(bola){
58.  jika(
jenis
59. ctx != "tidak ditentukan"){ ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2,
false
61. ctx.fill(); }
62. }
64. //Kosongkan kanvas
65. fungsi clearCanvas(){
66.  jika(jenis ctx != "tidak ditentukan"){
67. ctx.clearRect(0, 0, 400, 300);
}
}
71. 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
73. (canvas.getContext){ 
//Dapatkan objek CanvasRenderingContext2D (berus) yang sepadan
var
75. ctx = canvas.getContext("2d"); drawBola(bola);
}
77. //Fungsi pengendali panggilan balik untuk acara onkeydown
78. //Kawal pergerakan bola mengikut kekunci pengguna
79. fungsi moveBall(acara){
80. tukar(event.keyCode){
81.  kes 37: //Kekunci anak panah kiri  
82. bola.moveLeft();
83. rehat;
 
84. kes 38: //Kekunci arah atas  
ball.moveUp();
86. rehat;  
kes
87. 39: //Kekunci anak panah kanan   bola.moveRight();
rehat
89. ;  kes
40: 
90. //Kekunci anak panah ke bawah bola.moveDown();
91. rehat
;
92.  lalai: 
//Operasi utama lain tidak bertindak balas
93. kembali;
94. }  
95. clearCanvas();
//Kosongkan kanvas dahulu
97. drawBall(bola); //Lukis bola terkini
98. }