Manipulasi gambar dengan kanvas HTML5: teka -teki gelongsor

mata teras

Elemen Kanvas HTML5 membolehkan integrasi asli kandungan multimedia, termasuk lukisan garis, fail imej, dan animasi, ke laman web, dan boleh digunakan untuk membuat permainan teka -teki gelongsor.
Lukisan kanvas dilakukan melalui konteks yang diasaskan oleh fungsi JavaScript
• . Fungsi getContext() dalam JavaScript digunakan untuk memaparkan imej pada kanvas, dan pilihan parameter yang berbeza membolehkan saiz semula imej dan mengekstrak bahagian imej. drawImage()
Logik permainan teka-teki gelongsor melibatkan membuat array dua dimensi untuk mewakili papan. Setiap elemen adalah objek dengan koordinat X dan Y yang menentukan kedudukannya dalam grid teka -teki. Apabila papan dimulakan, setiap sekeping teka -teki terletak di persegi papan yang bertentangan dengan kedudukan yang betul.
peristiwa input pengguna mencetuskan fungsi yang mengira semula bilangan dan saiz jubin, trek pergerakan tetikus untuk mengenal pasti jubin yang diklik, dan periksa sama ada teka -teki diselesaikan.
• Fungsi ini akan menarik semula papan menggunakan jubin yang diklik dalam kedudukan baru. drawTiles()

HTML5 mengandungi banyak ciri yang membolehkan integrasi asli multimedia ke dalam laman web. Salah satu fungsi ialah elemen kanvas, yang merupakan kanvas kosong yang boleh mengisi lukisan garis, fail imej, atau animasi. Dalam tutorial ini, saya akan menunjukkan keupayaan pemprosesan imej kanvas HTML5 dengan membuat permainan teka -teki gelongsor. Untuk memasukkan kanvas ke dalam laman web, gunakan

tag: <canvas></canvas>

Properties

<canvas height="480px" width="480px"></canvas>

dan width menetapkan saiz kanvas dalam piksel. Jika sifat -sifat ini tidak ditentukan, lalai lebar ke 300px dan ketinggian mungkir hingga 150px. Lukisan kanvas dilakukan melalui konteks yang dimulakan oleh fungsi JavaScript height. Konteks dua dimensi yang ditentukan oleh W3C tepat dirujuk sebagai "2D". Oleh itu, untuk memulakan konteks untuk kanvas dengan "kanvas" id, kita hanya perlu memanggil: getContext()

document.getElementById("canvas").getContext("2d");

Langkah seterusnya ialah memaparkan imej. JavaScript hanya menyediakan fungsi

untuk ini, tetapi terdapat tiga cara untuk memanggil fungsi ini. Dalam bentuk yang paling asas, fungsi ini mengambil tiga parameter: objek imej dan offset X dan Y dari sudut kiri atas kanvas. drawImage()

drawImage(image, x, y);

Dua parameter lain juga boleh ditambah untuk mengubah saiz imej.

width Bentuk yang paling kompleks dari height

mengambil sembilan parameter. Yang pertama ialah objek imej. Empat parameter seterusnya adalah sumber x, y, lebar dan ketinggian. Empat parameter yang lain adalah sasaran x, y, lebar dan ketinggian. Fungsi ini mengekstrak sebahagian imej untuk menarik kanvas dan mengubah saiznya jika perlu. Ini membolehkan kita merawat imej sebagai jadual sprite.

drawImage(image, x, y, width, height);

<canvas height="480px" width="480px"></canvas>

Semua bentuk drawImage() mempunyai beberapa langkah berjaga -jaga. Jika imej kosong, atau dimensi mendatar atau menegak adalah sifar, atau ketinggian sumber atau lebar adalah sifar, maka drawImage() akan membuang pengecualian. Jika penyemak imbas tidak dapat menyahkod imej, atau imej belum dimuatkan apabila fungsi dipanggil, drawImage() tidak akan memaparkan apa -apa. Itu semua tentang menggunakan kanvas HTML5 untuk pemprosesan imej. Sekarang mari kita melihatnya dalam amalan.

document.getElementById("canvas").getContext("2d");

Blok HTML ini mengandungi ciri HTML5 yang lain, Input Range, yang membolehkan pengguna memilih nombor menggunakan slider. Kami akan melihat kemudian bagaimana pelbagai input berinteraksi dengan teka -teki. Tetapi sedar: Walaupun kebanyakan pelayar menyokong input pelbagai, pada masa penulisan, dua pelayar yang lebih popular -Internet Explorer dan Firefox -direcsa tidak disokong. Seperti yang disebutkan di atas, untuk menarik kanvas kita memerlukan konteks.

drawImage(image, x, y);

kita memerlukan gambar lain. Anda boleh menggunakan imej yang disebutkan di bawah atau mana -mana imej persegi lain yang sesuai (atau boleh diubah saiznya sesuai) kanvas.

drawImage(image, x, y, width, height);

pendengar acara digunakan untuk memastikan bahawa imej telah dimuatkan sebelum penyemak imbas cuba menariknya. Jika imej tidak bersedia untuk ditarik, kanvas tidak akan memaparkan imej. Kami akan mendapat saiz papan dari kanvas teka -teki dan mendapatkan bilangan jubin dari input jarak. Slider ini mempunyai julat 3 hingga 5, dan nilai -nilai mewakili bilangan baris dan lajur.

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

Gunakan kedua -dua nombor ini, kita boleh mengira saiz jubin.

  简单
  困难
  




  <canvas height="480px" width="480px"></canvas>

Sekarang kita boleh membuat papan.

var context = document.getElementById("puzzle").getContext("2d");

Fungsi

setBoard() adalah di mana kita menentukan dan memulakan papan maya. Cara semulajadi untuk mewakili papan catur adalah menggunakan array dua dimensi. Dalam JavaScript, mewujudkan array seperti itu bukan proses yang elegan. Kami mula -mula mengisytiharkan array rata, dan kemudian mengisytiharkan setiap elemen array sebagai array. Unsur -unsur ini kemudiannya boleh diakses sama seperti mengakses pelbagai pelbagai. Untuk permainan teka -teki gelongsor, setiap elemen akan menjadi objek dengan koordinat X dan Y yang menentukan kedudukannya dalam grid teka -teki. Oleh itu, setiap objek akan mempunyai dua set koordinat. Kumpulan pertama akan menjadi kedudukannya dalam array. Ini menunjukkan kedudukannya di papan, jadi saya menyebutnya sebagai persegi checkerboard. Setiap persegi papan mempunyai objek yang sifatnya X dan Y mewakili kedudukan mereka dalam imej teka -teki. Saya panggil kedudukan ini sekeping teka -teki. Apabila koordinat papan persegi sepadan dengan koordinat sekeping teka -teki, jubin berada di kedudukan yang betul untuk penyelesaian teka -teki. Dalam tutorial ini, kami memulakan setiap sekeping teka -teki ke persegi checkerboard yang bertentangan dengan kedudukan yang betul dalam teka -teki. Sebagai contoh, jubin di sudut kanan atas akan terletak di dataran catur di sudut kiri bawah.

... (Kod berikutnya ditinggalkan kerana panjangnya terlalu panjang dan logik teras telah digariskan lebih awal. Kod lengkap perlu disediakan mengikut teks asal.)

Akhirnya, buat semula papan menggunakan jubin yang diklik dalam kedudukan baru.

... (kod berikutnya ditinggalkan)

ini semua! Unsur kanvas dan beberapa pengetahuan JavaScript dan matematik membawa keupayaan pemprosesan imej asli yang kuat ke HTML5.

Anda boleh mencari demonstrasi langsung teka -teki gelongsor di https://www.php.cn/link/15FD459BC66AA8401543D8F4D1D80D97

Soalan Lazim (Soalan Lazim) Mengenai Pemprosesan Imej Dengan Kanvas HTML5 dan Teka -teki Sliding

Bagaimana untuk membuat permainan teka -teki gelongsor menggunakan kanvas HTML5?

Membuat teka -teki gelongsor dengan kanvas HTML5 melibatkan beberapa langkah. Pertama, anda perlu membuat elemen kanvas dalam fail HTML. Kemudian, dalam fail JavaScript, anda perlu merujuk kanvas ini dan konteks 2Dnya, yang akan membolehkan anda menariknya. Anda kemudian boleh memuatkan imej ke kanvas dan membahagikannya ke dalam grid jubin. Jubin ini boleh digerakkan untuk mewujudkan keadaan teka -teki awal. Logik permainan kemudiannya boleh dilaksanakan, termasuk memindahkan jubin dan memeriksa keadaan yang menang.

Bagaimana menggunakan API kanvas untuk memproses piksel?

API kanvas

menyediakan kaedah yang dipanggil getImageData() yang membolehkan anda mengambil data piksel dari kawasan kanvas yang ditentukan. Kaedah ini mengembalikan objek ImageData yang mengandungi pelbagai nilai piksel. Setiap piksel diwakili oleh empat nilai (merah, hijau, biru, dan alpha), jadi anda boleh memproses nilai -nilai ini untuk menukar warna piksel tunggal. Untuk menggunakan perubahan ini, anda boleh menggunakan kaedah putImageData().

Apakah kaedah toDataURL() dalam htmlcanvaselement?

Kaedah toDataURL() dalam htmlcanvaselement adalah alat yang berkuasa yang membolehkan anda membuat URL data yang mewakili imej yang dipaparkan dalam kanvas. URL data ini boleh digunakan sebagai sumber untuk elemen imej, disimpan ke pangkalan data, atau dihantar ke pelayan. Kaedah ini mengambil parameter pilihan untuk menentukan format imej. Jika tiada parameter disediakan, format lalai adalah PNG.

Bagaimana untuk menyumbang kepada projek permainan teka -teki gelongsor di GitHub?

GitHub adalah platform di mana pemaju berkongsi projek mereka dan bekerja dengan orang lain. Jika anda ingin menyumbang kepada projek teka -teki gelongsor, anda boleh memulakan dengan repositori forking, yang membuat salinan projek dalam akaun GitHub anda sendiri. Anda kemudian boleh mengklon repositori ini ke mesin tempatan anda, membuat perubahan, dan tolak perubahan tersebut kembali ke repositori bercabang anda. Akhirnya, anda boleh membuka permintaan tarik untuk mencadangkan perubahan pada repositori asal anda.

Bagaimana menggunakan kanvas untuk pemprosesan imej?

Kanvas menyediakan cara yang fleksibel dan berkuasa untuk memproses imej. Anda boleh menarik imej ke kanvas, gunakan transformasi dan memproses piksel tunggal. Sebagai contoh, anda boleh membuat kesan kelabu dengan melelehkan data piksel dan menetapkan nilai merah, hijau, dan biru kepada purata nilai asal. Anda juga boleh membuat kesan tan dengan menggunakan formula tertentu kepada nilai -nilai dalam warna merah, hijau, dan biru. Selepas memproses imej, anda boleh mengeksport hasil menggunakan kaedah toDataURL().

Atas ialah kandungan terperinci Manipulasi gambar dengan kanvas HTML5: teka -teki gelongsor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!