Saya tidak berencana mengajar kanvas, saya hanya melihatnya karena menurut saya itu menyenangkan.
Artinya agak kasar, jadi jangan mengkritik saya. .
MemengaruhiFrame ratenya sedikit lebih rendah, tetapi performa sebenarnya tentu saja jauh lebih mulus.
Menerapkan HTML
<!DOCTYPE html><head> <nama meta=konten viewport=lebar=lebar perangkat, skala pengguna=tidak, skala awal=1.0, skala maksimum=1.0, skala minimum=1.0> <gaya> * { margin: 0;padding: 0;} body {warna latar: biru muda;} #kanvas {warna latar: hitam;lebar: 100vw;} </style></head><body> <canvas id=canvas></canvas> <script>/* Lihat di bawah*/</script></body>JS
window.onload = function () { let // Canvas ctx = document.getElementById('canvas').getContext('2d'), // Ukuran kanvas canvas_width = document.getElementById('canvas').width, canvas_height = dokumen .getElementById('canvas').height, // Warna teks, font, warna latar belakang ikon DVD text_color = ['hijau', 'biru', 'ungu', 'kuning', 'putih', 'kuning', 'putih'], text_font = 'italic bold 50px yahei', background_color = ['merah', 'oranye', 'kuning', ' hijau', 'biru', 'nila', 'ungu'], // Ukuran persegi panjang background background_width = 110, background_height = 50, // Saat menambahkan teks ke persegi panjang, tingginya sedikit menyimpang fix_height = 7, // Kecepatan, setiap gambar ulang bergerak 0,5 px speed_x = 0,5, speed_y = 0,5, // Arah bergerak, awalnya 'rb' arah kanan bawah = 'rb', // Koordinat ikon x dan y, awalnya 0 position_x = 0, position_y = 0, // Jumlah tabrakan, digunakan untuk menghitung jumlah warna latar dan teks = 0 dvd() function dvd() { // Sakelar arah pergerakan (arah) { // Huruf kanan bawah 'rb': position_x += speed_x position_y += speed_y break // Huruf kanan atas 'rt': position_x += speed_x position_y -= speed_y break // Huruf kiri bawah 'lb': position_x -= speed_x position_y += speed_y break // Huruf kiri atas 'lt': position_x -= speed_x position_y -= speed_y break } // Hapus kanvas ctx.clearRect(0, 0, canvas_width, canvas_height) // Gambar ulang ctx.fillRect(position_x, position_y, background_width, background_height) // Deteksi tabrakan // Bottom if (position_y + background_height > = tinggi_kanvas) { arah = arah.replace('b', 't') // Jumlah tabrakan += 1 } // Kanan if (position_x + background_width >= canvas_width) { arah = arah.replace('r', 'l') count += 1 } // Kiri if (position_x < 0) { arah = arah.replace(' l', 'r') hitung += 1 } // atas if (posisi_y < 0) { arah = arah.ganti('t', 'b') hitung += 1 } // Teks ctx.font = text_font ctx.fillStyle = text_color[count % 7] ctx.fillText(DVD, position_x, position_y + background_height - fix_height) // Warna latar belakang ctx.fillStyle = background_color[count % 7] // Memulai jendela animasi. permintaanAnimationFrame(dvd) }}Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.