Komentar: Saya belajar HTML5 baru-baru ini, yang melibatkan unsur-unsur yang sangat kritis Canvas-Canvas. Setelah mencari dan meneliti, saya akhirnya akan menyadari animasi sederhana Super Mary. Saya akan membaginya dengan Anda di sini, saya harap ini akan membantu bagi pemula.
Baru-baru ini, saya belajar HTML5, yang melibatkan unsur-unsur yang sangat kritis kanvas. Saya mengunduh beberapa kode sumber game secara online. Meskipun saya bisa memahaminya, masih sulit untuk mengekstraksi fungsi tertentu secara terpisah. Jadi saya mencari beberapa contoh online dan menyadari animasi sederhana Super Mary.Fungsi drawimage () utama yang terlibat dalam desain
(1) DrawImage (Image, X, Y) Metode ini adalah metode operasi paling dasar. Secara khusus, ini mengacu pada menggambarkan seluruh objek gambar yang ingin Anda operasikan pada sumbu koordinat yang ditentukan, dengan sudut kiri atas menjadi asal (0,0) untuk menghitung posisi yang Anda inginkan untuk menggambarkannya
(2) DrawImage (gambar, x, y, lebar, tinggi) Metode ini mengacu pada penskalaan objek gambar yang perlu Anda beroperasi dan kemudian menggambarkannya di Artboard. Lebar dan tinggi adalah ukuran yang Anda ingin gambar ditarik setelah ditarik.
(3) DrawImage (Image, SourceX, Sourceey, SourceWidth, SourceHeight, Destx, Desty, Destwidth, Destheight) Ini adalah metode yang paling kompleks, tetapi juga cukup berguna. Ini berarti bahwa dalam objek gambar yang ingin Anda operasikan, pilih posisi sudut kiri atas (SourceX, Source) yang ingin Anda posisikan, kemudian mencegat lebar dan tinggi yang Anda inginkan (SourceWidth, SourceHeight), dan menggambarkan gambar yang dicegat dalam posisi yang sesuai (Destx, Desty) dan rentang yang sesuai (Destwidth, Destheight).
1. Pertama, saya mencari gambar gerakan berjalan terus -menerus Super Mary secara online (seperti yang ditunjukkan di bawah)
2. Buat file HTML5 baru, menamakannya Mario.html di sini, tentukan elemen kanvas, mulai tombol start animasi, dan jeda tombol berhenti animasi
3. Fungsi JS Terkait