html5 menggunakan kanvas untuk melaksanakan animasi mudah kemahiran tutorial Super Mario_html5

Baru-baru ini, saya telah mempelajari HTML5, yang melibatkan elemen yang sangat penting, kanvas Saya memuat turun beberapa kod sumber permainan dari Internet Walaupun saya boleh memahaminya, masih sukar untuk mengekstrak fungsi tertentu secara individu, jadi saya pergi dalam talian semula. Selepas mencari beberapa contoh, saya menyedari animasi mudah Super Mario.

Fungsi drawImage() utama yang terlibat dalam reka bentuk

(1) drawImage(image,x,y) Kaedah ini ialah kaedah operasi yang paling asas, khususnya Ia bermaksud untuk melukis keseluruhan objek imej yang anda mahu kendalikan pada paksi koordinat yang ditentukan, dengan sudut kiri atas sebagai asalan (0, 0), untuk mengira kedudukan yang anda mahu ia lukis
(2) drawImage(imej, x, y, lebar, tinggi) Kaedah ini bermaksud untuk menskalakan objek imej yang anda perlukan untuk mengendalikannya dan kemudian melukisnya pada papan lukisan Lebar dan ketinggian ialah saiz yang anda mahu imej itu selepas melukis
(3) drawImage (imej, sourceX, sourceY ,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight) Ini adalah cara yang paling rumit, tetapi ia juga agak berguna. Ini bermakna bahawa dalam objek imej yang anda ingin kendalikan, pilih kedudukan sudut kiri atas yang anda mahu letakkan (sourceX, sourceY), kemudian memintas lebar dan ketinggian yang anda mahu (sourceWidth, sourceHeight), dan lukis imej yang dipintas ke papan seni Dalam kedudukan yang sepadan (destX, destY) dan julat yang sepadan (destWidth, destHeight).

1 Mula-mula, saya mencari dalam talian untuk gambar pergerakan berjalan berterusan Super Mario (seperti yang ditunjukkan di bawah)

2. Buat fail html5 baharu, bernama mario.html di sini, dan tentukan elemen kanvas, butang mula animasi, jeda butang berhenti animasi

3. Fungsi js berkaitan