Contoh kode penggunaan kanvas untuk mengimplementasikan efek animasi mesin gashapon

Dalam sekejap, saya sudah magang selama dua bulan. Perusahaan memiliki acara hari keanggotaan setiap bulannya. Tugas bulan ini adalah mengadakan acara lotere mesin gashapon. Ada antarmuka untuk data dan sebagainya kiri di ujung depan Tugas terbesarnya hanyalah mewujudkan animasi mesin gashapon.

Saya sangat bersemangat untuk menemukan animasi mesin gashapon dari Internet, tetapi ternyata menggunakan animasi CSS langsung untuk menulis animasi gashapon sampai mati. Saya tidak terlalu menyukainya, jadi saya memilih menggunakan kanvas untuk menggambar animasi acak dari gashapon. Pertama saya menulis demo mesin gashapon sederhana dan melihat efeknya.

Tata letak mesin gashapon relatif sederhana. Anda hanya perlu menambahkan beberapa elemen ke latar belakang dasar.

 <div class=bg> <span id=message>Klik untuk menggambar</span> <div class=lotterybg> <canvas id=myCanvas width=285px height=170px></canvas> <img src=img/lighting.png kelas =pencahayaan/> </div></div><img src=img/start-btn.png id=mulai onclick=play()/><div class=award><span id=awardBall></span></div><img src=img/1.png id=ball1 class=imgSrc><img src=img/2 .png id=ball2 class=imgSrc><img src=img/3.png id=ball3 class=imgSrc><img src=img/4.png id=ball4 kelas=imgSrc>

Lembar gaya terlampir:

 body {margin: 0;padding: 0;border: none;}.bg {background: url(../img/bg.png) top no-repeat;background-size: 100%;overflow: tersembunyi;posisi: absolut ;lebar: 400px;tinggi: 100%;margin-atas: 0;margin-kiri: 50%;-webkit-transform: terjemahkan(-50%);-moz-transformasi: terjemahkan(-50%);-ms-transformasi: terjemahkan(-50%);-o-transformasi: terjemahkan(-50%);transformasi: terjemahkan(-50% );}#message {posisi: absolut; perataan teks: tengah; tinggi: 25 piksel; ukuran font: 22 piksel; margin-atas: 110 piksel; margin-kiri: 50%;-webkit-transformasi: terjemahkan(-50%);-moz-transformasi: terjemahkan(-50%);-ms-transformasi: terjemahkan(-50%);-o-transformasi: terjemahkan(-50%) ;transformasi: terjemahkan(-50%);}.lotterybg {latar belakang: url(../img/lotterybg.png) teratas tanpa pengulangan;ukuran latar belakang: 100%;meluap: terlihat;lebar: 80%;tinggi: 100%;margin-atas: 160 piksel;margin-kiri: 50%;-webkit-transform: terjemahkan(-50%);-moz-transform: terjemahkan(- 50%);-ms-transformasi: terjemahkan(-50%);-o-transformasi: terjemahkan(-50%);transformasi: Translate(-50%);}#myCanvas {posisi: absolut;batas: tidak ada;lebar: 285px;tinggi: 170px;margin-atas: 15px;margin-kiri: 50%;-webkit-transform: terjemahkan(-50% );-moz-transformasi: terjemahkan(-50%);-ms-transformasi: terjemahkan(-50%);-o-transformasi: terjemahkan(-50%);transformasi: terjemahkan(-50%);}.lighting {tampilan: blok;lebar maksimal: 99%;margin-atas: 0;margin-kiri: 0;}#mulai {posisi: absolut ;z-index: 3;lebar: 202px;margin-atas: 413px;margin-kiri: 50%;-webkit-transform: terjemahkan(-50%);-moz-transformasi: terjemahkan(-50%);-ms-transformasi: terjemahkan(-50%);-o-transformasi: terjemahkan(-50%);transformasi: terjemahkan(-50% );}.imgSrc {tampilan: tidak ada; posisi: absolut;}.award {posisi: absolut; batas: tidak ada; lebar: 60 piksel; tinggi: 200 piksel; atas: 470px;margin-kiri: 50%;-webkit-transform: terjemahkan(-50%);-moz-transform: terjemahkan(-50%);-ms-transform: terjemahkan(-50%);-o-transformasi: terjemahkan(-50%);transformasikan: terjemahkan(-50%);}

Dengan cara ini tata letak selesai, dan pekerjaan utama berikutnya adalah menggambar gambar di kanvas.

Pertama-tama tentukan berbagai variabel:

 var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');var ball1 = document.getElementById('ball1');//Objek gambar var ball2 = document.getElementById('ball2' );//Objek gambar var ball3 = document.getElementById('ball3');//Objek gambar var ball4 = document.getElementById('ball4');//Objek gambar var ballList = [ball1, ball2, ball3, ball4];//Array objek gambar var ballNum = 4;//Jumlah bola di mesin gashapon var awardList = [ ];//Kumpulan bola-bola kecil di mesin gashapon var timer;//Timer var award = document.getElementById('awardBall'); document.getElementById('pesan');

Setiap gashapon di mesin gashapon adalah sebuah objek, jadi Anda perlu mendefinisikan objek gashapon:

 function Bola(indeks, img) { this.r = 30;//Jari-jari bola this.x = this.rand(canvas.width - this.r * 2);//Abscissa awal bola this. y = this .rand(canvas.height - this.r * 2);//Koordinat vertikal awal bola this.color = indeks;//Warna bola, diwakili oleh subskrip this.img = img; //Bahan bola melakukan { ini .speedX = this.rand(20) - 10; } while (this.speedX < 5);//absis bola berubah kecepatan do { this.speedY = this.rand(20) - 10; );//Koordinat vertikal bola berubah kecepatan}

Indeks nilai objek gashapon yang masuk adalah warna bola yang diwakili oleh angka 1 sampai 4, dan img adalah objek gambar yang digunakan untuk menggambar gashapon tersebut.

Pada langkah sebelumnya, atribut telah ditambahkan ke gashapon. Langkah selanjutnya adalah menambahkan metode ke gashapon:

 Ball.prototype = { rand: function (num) {//Nomor acak mengembalikan Math.random() * num; }, jalankan: function () {//Fungsi gerak bola this.x += this.speedX y += this.speedY; if (this.x > canvas.width - this.r * 2) {//Bola menyentuh batas kanan, kecepatan absis menjadi negatif this.speedX = -this.speedX } if (this .X < 0) {//Bola menyentuh batas kiri, dan kecepatan absis menjadi positif this.speedX = Math.abs(this.speedX } if (this.y > canvas.height - this.r * 2) { //Saat bola mencapai batas bawah, kecepatan ordinat menjadi negatif this.speedY = -this.speedY } if (this.y < 0) {//Saat bola mencapai batas atas, kecepatan ordinat menjadi positif this; .kecepatanY = Math.abs(ini.kecepatanY); } ctx.drawImage(ini.img, ini.x, ini.y, 60, 60);//Gambar bolanya}}

Tujuan utamanya adalah untuk menambahkan fungsi gerak pada prototipe benda gashapon. Fungsi fungsi gerak adalah untuk membuat gashapon bergerak sesuai kecepatannya dan memantul ketika menyentuh batas.

Langkah selanjutnya adalah memasukkan gashapon ke dalam mesin gashapon:

 function init() {//Inisialisasi untuk (misalkan i = 0; i < ballNum; i++) {//Menghasilkan bola dengan berbagai warna secara acak misalkan indeks = Math.floor(4 * Math.random()); = Bola baru(indeks, daftar bola[indeks]);//Objek bola baru} window.clearInterval(timer);//Hapus pengatur waktu timer = setInterval(fungsi () { ctx.clearRect(0, 0, canvas.width, canvas.height);//Kosongkan kanvas untuk (misalkan i = 0; i < awardList.length; i++) { awardList[i].run(); ;

Dengan cara ini, bola-bola kecil sudah ada di mesin gashapon.

Proses utama memulai gashapon adalah dengan mengklik tombol. Mesin gashapon akan mengurangi jumlah telur gashapon dan mendapatkan telur gashapon yang sesuai.

 function play() { if (awardList.length === 0) {//Tidak ada bola di kumpulan hadiah alert('Mulai lagi!'); message.innerText = 'Klik untuk menggambar'; else { window.clearInterval(timer);//Hapus pengatur waktu let r = awardList.pop();//Kurangi bola di kumpulan penghargaan timer = setInterval(function () { ctx.clearRect(0, 0, canvas.width, canvas.height);//Kosongkan kanvas untuk (misalkan i = 0; i < awardList.length; i++) { awardList[i].run(); ; switch (r.color) {//bola menjatuhkan animasi kasus 0: award.setAttribute('class', 'dropBall1'); 'dropBall2'); kasus 2: penghargaan.setAttribute('kelas', 'dropBall3'); kasus 3: penghargaan.setAttribute('kelas', 'dropBall4'); //Gashapon award.setAttribute('class', ''); switch (r.color) yang berhasil { case 0: message.innerText = 'Bola ungu!'; 1: message.innerText = 'Bola hijau!'; pecah; kasus 2: pesan.innerText = 'Bola kuning!'; kasus 3: pesan.innerText = 'Bola merah!';

Animasi jatuhnya gashapon di sini diselesaikan menggunakan bingkai utama animasi CSS:

 .dropBall1 {konten: ;posisi: absolut;kiri: 0;atas: 0;lebar: 60px;tinggi: 60px;display: blok;latar belakang: url(../img/1.png) tanpa pengulangan;ukuran latar belakang : berisi;animasi: turunkan 1 detik ke depan; -webkit-animation: turunkan 1 detik ke depan;}.dropBall2 {konten: ;posisi: absolut;kiri: 0;atas: 0;lebar: 60px;tinggi: 60px;tampilan: blok;latar belakang: url(../img/2.png) tanpa pengulangan;ukuran latar belakang: berisi ;animation: drop 1s ease-out ke depan;-webkit-animation: drop 1s ease-out ke depan;}.dropBall3 {content: ;position: absolut;kiri: 0;atas: 0;lebar: 60px;tinggi: 60px;tampilan: blok;latar belakang: url(../img/3.png) tanpa pengulangan;ukuran latar: berisi;animasi: jatuhkan 1 detik dengan mudah -keluar ke depan;-webkit-animasi: drop 1 detik ke depan;}.dropBall4 {konten: ;posisi: absolut;kiri: 0;atas: 0;lebar: 60px;tinggi: 60px;tampilan: blok;latar belakang: url(../img/4.png) tanpa pengulangan;ukuran latar: berisi;animasi: jatuhkan 1 detik ke depan; -webkit-animasi: mundur 1 detik ke depan;}@keyframes turun { 0% { transform: scale(0.7 }); 50% { transformasi: skala(1); } 51% { transformasi: terjemahanY(0px); } 100% { transformasi: terjemahanY(100px }}@-webkit-keyframes turun { 0% { -webkit-transform: skala (0,7); } 50% { -transformasi webkit: skala(1); terjemahkanY(0px); } 100% { -transformasi webkit: terjemahanY(100px }}

Tentu saja, Anda perlu menambahkan init(); di akhir untuk membuat mesin gashapon berjalan. Pada titik ini, mesin gashapon sederhana ini telah selesai, dan efeknya dipratinjau.

Meskipun Demo ini relatif sederhana, masih ada beberapa hal yang perlu diperhatikan dan beberapa area yang dapat dioptimalkan.

Catatan

objek img

Tag img ini di html:

 <img src=img/1.png id=ball1 class=imgSrc><img src=img/2.png id=ball2 class=imgSrc><img src=img/3.png id=ball3 class=imgSrc><img src=img/4.png id=ball4 kelas=imgSrc>

Stylenya juga ditulis sebagai display: none;. Ini ditulis untuk mendapatkan objek img di js. Tentu saja, Anda juga dapat menulis tag img ini langsung di file js tanpa menulisnya di html:

 var img = Gambar baru(); img.src = 'img/1.png';

Dengan cara ini anda juga bisa mendapatkan objek img dan juga bisa digunakan untuk menggambar gashapon.

Timer dihapus dalam kode sebelum timer dipanggil. Tujuannya adalah karena jika timer tidak dihapus maka timer akan terus menghitung sehingga menyebabkan animasi menjadi semakin aneh.

Saat menggambar di kanvas, gambar mungkin menjadi tidak jelas atau membesar. Situasi ini dapat diatasi dengan mengatur atribut lebar dan tinggi tag kanvas agar sama dengan atribut lebar dan tinggi gaya.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.