Melukis di Web dengan Konteks Paparan Kanvas

Bagaimana cara anda membuat apl lukisan 2D dalam penyemak imbas?

Elemen kanvas html digabungkan dengan antara muka CanvasRenderingContext2D menyediakan cara mudah untuk melukis grafik di web.

Nota: Dua pilihan alternatif untuk melukis di web ialah WebGL dan SVG.

CanvasRenderingContext2D

Antara muka CanvasRenderingContext2D menyediakan konteks pemaparan 2D untuk permukaan lukisan elemen kanvas. Ia digunakan untuk melukis bentuk, teks, imej dan objek lain pada kanvas.

Ini ialah grafik raster berbanding grafik vektor yang digunakan oleh SVG. Grafik raster terdiri daripada piksel, manakala grafik vektor terdiri daripada laluan. Raster tidak
skala naik dan turun serta grafik vektor.

Kes Penggunaan

Beberapa kes penggunaan biasa untuk kanvas 2D termasuk:

• Suntingan foto
• Apl lukisan / lakaran
• Permainan mudah

Contoh Apl

Dalam contoh ini, kami mempunyai beberapa keperluan mudah:

• Pengguna boleh melukis garisan pada kanvas
• Pengguna boleh menetapkan latar belakang
• Pengguna boleh memilih warna latar belakang dan garis daripada pemilih warna EyeDropper dan palet warna lalai yang disediakan
• Pengguna boleh mengosongkan kanvas
• Pengguna boleh buat asal / buat semula
• Pengguna boleh memuat turun lukisan sebagai imej
• Pengguna boleh melakukan semua perkara di atas dengan kekunci pintas

codesandbox.io

Idea Ciri

Anda boleh mengambil contoh ini dengan lebih lanjut dengan menambahkan lebih banyak ciri seperti:

Penyesuaian pen: borang untuk membolehkan pengguna menyesuaikan saiz dan sapuan berus pen.

Menyimpan keadaan imej ke stor berterusan: keadaan imej sedang disimpan dalam keadaan komponen. Anda boleh menyimpan keadaan imej ke stor berterusan seperti storan setempat atau pangkalan data.

Menambah teks: tambah butang tindakan baharu untuk membolehkan pengguna menambah teks pada kanvas. Antara muka CanvasRenderingContext2D menyediakan
kaedah strokeText dan fillText untuk melukis teks pada kanvas.

Menambah imej: membenarkan pengguna memuat naik imej ke kanvas. Antara muka CanvasRenderingContext2D menyediakan kaedah drawImage untuk melukis imej pada kanvas. Ini benar-benar boleh membuka banyak kemungkinan untuk apl.

Menambah sistem lapisan: membenarkan pengguna menambah berbilang lapisan pada kanvas. Ini akan membolehkan pengguna melukis pada lapisan yang berbeza dan menogol keterlihatan setiap lapisan. Ini akan menjadi ciri yang lebih kompleks untuk dilaksanakan tetapi akan memberikan banyak fleksibiliti kepada pengguna.

Isi kawasan: tambah butang tindakan baharu untuk membolehkan pengguna mengisi kawasan dengan warna. Antara muka CanvasRenderingContext2D menyediakan kaedah isian untuk mengisi kawasan dengan gaya isian semasa.

Fikiran Akhir

Perlu disebut sekali lagi bahawa WebGL dan SVG ialah dua lagi pilihan menarik untuk melukis di web yang patut dilihat.

Dokumen MDN untuk antara muka CanvasRenderingContext2D ialah sumber yang hebat untuk mengetahui lebih lanjut tentang kanvas 2D.

Ambil contoh ini dan jalankan dengannya! Terdapat begitu banyak kemungkinan untuk mencipta apl lukisan yang menarik dan interaktif di web.

Atas ialah kandungan terperinci Melukis di Web dengan Konteks Paparan Kanvas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!