Tutorial Kanvas HTML5: Pengenalan

Takeaways Key

HTML5 Canvas adalah teknologi yang kuat yang membolehkan pemaju membuat grafik dan membuat animasi secara langsung dalam penyemak imbas menggunakan JavaScript. Elemen kanvas ditakrifkan dalam kod HTML menggunakan atribut lebar dan ketinggian, dan kuasa sebenar dimanfaatkan melalui API kanvas HTML5.
Ciri kanvas HTML5 adalah interaktif, mampu animasi, fleksibel, dan disokong oleh semua pelayar utama. Ia boleh digunakan untuk pelbagai aplikasi termasuk permainan, pengiklanan, perwakilan data, pendidikan dan latihan, dan seni dan hiasan.
Untuk menggunakan kanvas HTML5, pemaju memerlukan editor kod dan penyemak imbas dengan sokongan kanvas HTML5. Unsur kanvas dibuat dalam HTML, dan JavaScript digunakan untuk mengakses kawasan kanvas melalui satu set fungsi lukisan penuh, membolehkan penjanaan grafik dinamik.
kanvas HTML5 mempunyai sistem koordinat yang unik di mana asalnya diletakkan di sudut kiri atas kanvas. Koordinat x meningkat ke kanan dan y koordinat meningkat ke arah bawah kanvas. Sistem ini tidak mempunyai titik negatif yang kelihatan, jadi objek yang diposisikan menggunakan titik koordinat negatif tidak akan muncul di halaman.

berminat dengan animasi CSS? Semak membuat animasi dengan CSS, kursus lengkap mengenai peralihan CSS dan animasi utama oleh pemaju web pakar Donovan Hutchinson, yang tersedia untuk ahli SitePoint. Untuk contoh animasi kanvas HTML5, tonton ilustrasi dengan kanvas HTML5 di bawah, ia adalah satu video dalam permulaan kami menghidupkan dengan kursus mini kanvas HTML5.

Memuatkan pemain ...

Salah satu instrumen yang paling penting dalam toolkit pelukis adalah kanvas mereka. Ia memberi mereka kebebasan untuk mengekspresikan semua jenis perasaan, tanggapan, idea, dan sebagainya, dalam variasi dan kombinasi yang hampir tidak terhad. Dan kebebasan itu hanya dapat dihadkan oleh dua perkara - tahap kemahiran mereka dan imaginasi mereka.

Keadaan dalam dunia pembangunan web adalah serupa. Dengan kemajuan HTML5 yang berterusan dan spesifikasi yang kuat, pemaju web telah mendapat keupayaan untuk melakukan perkara -perkara yang mustahil pada masa lalu. Melukis grafik dan membuat animasi secara langsung dalam penyemak imbas kini mungkin benar -benar berkat teknologi yang dipanggil HTML5 Canvas.

apakah kanvas html5?

Elemen kanvas adalah elemen yang ditakrifkan dalam kod HTML menggunakan atribut lebar dan ketinggian. Kekuatan sebenar elemen kanvas, bagaimanapun, dicapai dengan memanfaatkan API kanvas HTML5. API ini digunakan dengan menulis JavaScript yang boleh mengakses kawasan kanvas melalui satu set fungsi lukisan penuh, dengan itu membolehkan grafik yang dihasilkan secara dinamik.

Apa yang begitu hebat tentang kanvas HTML5?

Berikut adalah beberapa sebab yang anda mungkin ingin mempertimbangkan untuk belajar menggunakan ciri kanvas HTML5:

• interaktiviti. Kanvas sepenuhnya interaktif. Ia boleh bertindak balas terhadap tindakan pengguna dengan mendengar papan kekunci, tetikus, atau sentuhan. Jadi pemaju tidak terhad kepada hanya grafik statik dan imej.
• animasi. Setiap objek yang ditarik pada kanvas boleh animasi. Ini membolehkan semua peringkat animasi dibuat, dari bola memantul mudah ke kinematik ke hadapan dan songsang yang kompleks.
• fleksibiliti. Pemaju boleh membuat apa sahaja yang menggunakan kanvas. Ia boleh memaparkan garis, bentuk, teks, imej, dan lain -lain - dengan atau tanpa animasi. Plus, menambah video dan/atau audio ke aplikasi kanvas juga mungkin.
• sokongan pelayar/platform. Kanvas HTML5 disokong oleh semua pelayar utama dan boleh diakses pada pelbagai peranti termasuk desktop, tablet, dan telefon pintar.
• Populariti. Populariti kanvas pesat dan terus berkembang sehingga tidak ada kekurangan sumber yang tersedia.
• Ia adalah standard web. Tidak seperti Flash dan Silverlight, kanvas adalah teknologi terbuka yang merupakan sebahagian daripada HTML5. Dan walaupun tidak semua ciri -cirinya dilaksanakan di semua pelayar, pemaju boleh menjadi kanvas tertentu akan berada di sekitar selama -lamanya.
• Kembangkan sekali, jalankan di mana -mana. HTML5 Canvas menawarkan mudah alih yang hebat. Sebaik sahaja dicipta, tidak seperti Flash dan Silverlight, aplikasi kanvas boleh berjalan hampir di mana sahaja - dari komputer terbesar ke peranti mudah alih terkecil.
• alat pembangunan percuma dan boleh diakses. Alat asas untuk membuat aplikasi kanvas HTML5 hanya penyemak imbas dan editor kod yang baik. Selain itu, terdapat banyak perpustakaan dan alat yang hebat dan percuma untuk membantu pemaju dengan pembangunan kanvas maju.

aplikasi apa yang boleh anda buat dengan kanvas html5?

OK, kanvas hebat. Tetapi apa sebenarnya yang boleh menggunakannya? Mari kita lihat.

• permainan. Set ciri HTML5 Canvas 'adalah calon yang ideal untuk menghasilkan pelbagai permainan 2D dan 3D.
• Pengiklanan. HTML5 Canvas adalah pengganti yang hebat untuk spanduk dan iklan berasaskan kilat. Ia mempunyai semua ciri yang diperlukan untuk menarik perhatian pembeli.
• Perwakilan data. HTML5 boleh mengumpul data dari sumber data global dan menggunakannya untuk menghasilkan graf dan carta yang menarik dan interaktif secara visual dengan elemen kanvas.
• Pendidikan dan Latihan. Kanvas HTML5 boleh digunakan untuk menghasilkan pengalaman pembelajaran yang berkesan dan menarik, menggabungkan teks, imej, video, dan audio.
• seni dan hiasan. Dengan sedikit imaginasi dan pelbagai warna, kecerunan, corak, ketelusan, bayang -bayang, dan ciri -ciri keratan, semua jenis grafik artistik dan hiasan boleh ditarik.

Sekarang kita tahu mengapa kita harus belajar kanvas, mari kita lihat asas -asas kanvas HTML5 dan bagaimana untuk mula menggunakannya.

Konteks Rendering Canvas

Setiap elemen kanvas HTML5 mesti mempunyai konteks . Konteks ini mentakrifkan API kanvas HTML5 yang akan anda gunakan. Konteks 2D digunakan untuk melukis grafik 2D dan memanipulasi imej bitmap. Konteks 3D digunakan untuk penciptaan grafik 3D dan manipulasi. Yang terakhir sebenarnya dipanggil WebGL dan ia berdasarkan OpenGL es.

Bermula

Untuk memulakan kanvas, semua yang anda perlukan adalah editor kod dan penyemak imbas dengan sokongan kanvas HTML5. Saya menggunakan teks luhur dan Google Chrome, tetapi anda boleh menggunakan apa sahaja yang anda mahukan.

html kami untuk memulakan akan kelihatan seperti ini:

<span><span><span><canvas</span> id<span>="exampleCanvas"</span> width<span>="500"</span> height<span>="300"</span>></span>
</span>
  <span><!-- OPTION 1: leave a message here if browser doesn't support canvas -->
</span>    <span><span><span><p</span>></span>Your browser doesn’t currently support HTML5 Canvas. 
</span>    Please check caniuse.com/#feat=canvas for information on 
    browser support for canvas.<span><span><span></p</span>></span>
</span>
  <span><!-- OPTION 2: put fallback content (text, image, Flash, etc.) 
</span><span>                 if the browser doesn't support canvas -->
</span>
<span><span><span></canvas</span>></span></span>

Dan inilah JavaScript kami, yang boleh kami sertakan di bahagian bawah halaman HTML kami:

<span>var canvas = document.getElementById('exampleCanvas'),
</span>    context <span>= canvas.getContext('2d');
</span>
    <span>// code examples will continue here...</span>

Secara lalai, penyemak imbas mencipta elemen kanvas dengan lebar 300 piksel dan ketinggian 150 piksel, walaupun ini tidak ditentukan dalam HTML. Anda boleh menukar saiz dengan menentukan lebar dan ketinggian, seperti yang saya lakukan dalam HTML.

Notis juga bahawa kami telah memberikan kanvas satu atribut ID yang akan kami gunakan dalam JavaScript kami. Dan akhirnya, jika anda mahu, anda boleh menggunakan CSS untuk menambah sempadan untuk menjadikan kanvas kelihatan dengan bingkai nipis. Ini tidak diperlukan, ia digunakan sebagai bantuan visual bagi kita untuk melihat sempadan elemen kanvas.

Perhatikan bahawa antara pembukaan dan penutup tag, saya telah menambah kandungan yang akan dipaparkan jika penyemak imbas tidak menyokong kanvas. Ini boleh hanya kira -kira jenis kandungan yang menyokong pelayar yang lebih tua.

JavaScript bermula dengan dua baris. Dalam baris pertama kami membuat pembolehubah yang cache elemen kanvas kami melalui IDnya. Baris kedua mencipta pembolehubah (konteks) yang merujuk konteks 2D untuk kanvas menggunakan fungsi getContext (). Kami akan menggunakan pembolehubah konteks untuk mengakses semua fungsi lukisan kanvas dan sifat.

Dengan kanvas kami bersedia untuk pergi, kami boleh mula bereksperimen dengan API kanvas. Tetapi sebelum itu, mari kita jelaskan beberapa lagi aspek ciri kanvas.

saiz elemen kanvas html5 vs lukisan saiz permukaan

Selain atribut lebar dan ketinggian elemen kanvas, anda juga boleh menggunakan CSS untuk menetapkan saiz elemen kanvas. Walau bagaimanapun, saiz elemen kanvas dengan CSS tidak sama dengan menetapkan atribut lebar dan ketinggian elemen. Ini kerana kanvas sebenarnya mempunyai dua saiz: saiz elemen itu sendiri dan saiz permukaan lukisan elemen.

Apabila anda menetapkan atribut lebar dan ketinggian elemen, anda menetapkan kedua -dua saiz elemen dan saiz permukaan lukisan elemen; Walau bagaimanapun, apabila anda menggunakan CSS untuk mengukur elemen kanvas, anda hanya menetapkan saiz elemen dan bukan permukaan lukisan. Apabila saiz elemen kanvas tidak sepadan dengan saiz permukaan lukisannya, penyemak imbas skala permukaan lukisan agar sesuai dengan elemen.

Kerana ini, adalah idea yang baik untuk menggunakan atribut lebar dan ketinggian elemen kanvas untuk mengukur elemen, bukannya menggunakan CSS.

memahami sistem koordinat kanvas

Dalam ruang 2D, kedudukan dirujuk menggunakan koordinat X dan Y. Paksi x memanjangkan secara mendatar, dan paksi y meluas secara menegak. Pusat ini mempunyai kedudukan x = 0 dan y = 0, yang juga boleh dinyatakan sebagai (0, 0). Kaedah objek kedudukan ini, yang digunakan dalam matematik, dikenali sebagai sistem koordinat Cartesian.

Sistem koordinat kanvas, bagaimanapun, meletakkan asal di sudut kiri atas kanvas, dengan koordinat x meningkat ke kanan dan y koordinat meningkat ke arah bawah kanvas. Jadi tidak seperti ruang koordinat Cartesian standard, ruang kanvas tidak mempunyai mata negatif yang kelihatan. Menggunakan koordinat negatif tidak akan menyebabkan permohonan anda gagal, tetapi objek yang diposisikan menggunakan titik koordinat negatif tidak akan muncul di halaman.

Contoh Kanvas Asas

Seperti yang disebutkan, kanvas HTML5 Mari anda buat banyak jenis objek, termasuk garis, lengkung, laluan, bentuk, teks, dan lain -lain. Dalam contoh -contoh untuk mengikuti anda dapat melihat bagaimana beberapa objek ini sebenarnya ditarik. Saya tidak akan terperinci mengenai API kanvas; Ini hanya mudah untuk membantu anda merasakan bagaimana kanvas berfungsi.

lukisan garis

Untuk melukis garis, kami menggunakan empat kaedah API kanvas. Kami mulakan dengan kaedah permulaan () yang mengarahkan penyemak imbas untuk mempersiapkan untuk melukis jalan baru. Seterusnya, kami menggunakan kaedah MoveTo (X, Y) untuk menetapkan titik permulaan baris. Kemudian kaedah lineto (x, y) menetapkan titik akhir dan menarik garisan dengan menyambungkan dua mata.

Pada masa ini garis akan ditarik, tetapi ia masih tidak kelihatan. Untuk menjadikannya kelihatan, kami menggunakan kaedah strok () untuk memaparkan garis dengan warna hitam lalai.

<span><span><span><canvas</span> id<span>="exampleCanvas"</span> width<span>="500"</span> height<span>="300"</span>></span>
</span>
  <span><!-- OPTION 1: leave a message here if browser doesn't support canvas -->
</span>    <span><span><span><p</span>></span>Your browser doesn’t currently support HTML5 Canvas. 
</span>    Please check caniuse.com/#feat=canvas for information on 
    browser support for canvas.<span><span><span></p</span>></span>
</span>
  <span><!-- OPTION 2: put fallback content (text, image, Flash, etc.) 
</span><span>                 if the browser doesn't support canvas -->
</span>
<span><span><span></canvas</span>></span></span>

Lihat contoh garis kanvas pena oleh SitePoint (@SitePoint) pada codepen.

Lukis segi empat tepat

Untuk melukis segi empat tepat, kita boleh menggunakan kaedah fillrect (x, y, lebar, ketinggian) untuk menetapkan koordinat dan dimensi, bersama -sama dengan sifat fillstyle untuk menetapkan warna mengisi.

<span>var canvas = document.getElementById('exampleCanvas'),
</span>    context <span>= canvas.getContext('2d');
</span>
    <span>// code examples will continue here...</span>

Lihat contoh Rectangle Canvas Pena oleh SitePoint (@SitePoint) pada Codepen.

Perhatikan bahawa segi empat tepat diposisikan berhampiran sudut kiri atas.

Lukis teks

Untuk melukis teks pada kanvas, kita boleh menggunakan fillText (rentetan, x, y) bersama -sama dengan harta font untuk menetapkan fon, saiz, dan gaya teks (serupa dengan fon shorthand dalam css).

context<span>.beginPath();
</span>context<span>.moveTo(50, 50);
</span>context<span>.lineTo(250, 150);
</span>context<span>.stroke();</span>

lihat contoh teks kanvas pena oleh SitePoint (@SitePoint) pada codepen.

Anda harus sedar bahawa walaupun lukisan mudah dengan API kanvas HTML5 mudah, mewujudkan bentuk dan animasi yang kompleks memerlukan beberapa pengetahuan matematik dan fizik. Salah satu buku terbaik mengenai topik ini ialah animasi Yayasan HTML5 dengan JavaScript. Buku ini adalah sumber yang hebat untuk belajar memindahkan sesuatu, dari animasi mudah hingga kompleks.

di mana untuk mengetahui lebih lanjut?

jika anda ingin belajar di sini adalah beberapa sumber:

• tutorial kanvas - tutorial yang sangat baik mengenai MDN, penuh dengan contoh, ilustrasi, dan penjelasan terperinci.
• Panduan Elemen Kanvas HTML5 - tutorial pemula dari enam semakan.
• tutorial kanvas HTML5 - satu set tutorial penuh yang dicipta oleh Eric Rowell, pencipta perpustakaan kanvas KineticJS. Semua contoh adalah interaktif; Anda boleh bermain dengan mereka dan melihat hasilnya dengan segera.

mempercepat pembangunan kanvas

Bekerja dengan API kanvas HTML5 "mentah" boleh menjadi pekerjaan yang membosankan. Itulah sebabnya ia adalah idea yang baik apabila anda belajar dengan baik untuk beralih ke perpustakaan kanvas yang baik yang dapat mempercepatkan dan membuat perkembangan kanvas anda lebih mudah. ​​

Berikut adalah beberapa pilihan yang popular:

• Kineticjs
• paper.js
• easeljs
• fabric.js
• ocanvas

Satu lagi cara untuk mempercepatkan pembangunan kanvas HTML5 anda adalah dengan menggunakan plugin kanvas AI-> untuk Adobe Illustrator. Anda boleh mendapatkan gambaran keseluruhan plugin dalam artikel ini di SitePoint.

Kesimpulan

itu sahaja. Saya harap tutorial kanvas HTML5 pengenalan ini memberi anda titik permulaan yang baik untuk meneruskan pembelajaran dan meneroka teknologi yang berkuasa ini.

Soalan Lazim (Soalan Lazim) Mengenai Kanvas HTML5

Apakah perbezaan antara kanvas SVG dan HTML5? Walau bagaimanapun, mereka berbeza dalam pendekatan dan kes penggunaannya. SVG adalah pendekatan berasaskan vektor di mana setiap bentuk yang ditarik diingati sebagai objek. Jika atribut objek diubah, penyemak imbas secara automatik boleh membuat semula adegan. SVG sangat bagus untuk grafik interaktif dan animasi elemen. Sebaliknya, kanvas HTML5 adalah berasaskan piksel. Sebaik sahaja bentuk ditarik, ia dilupakan oleh sistem. Sekiranya atributnya berubah, ia mesti diganti semula bersama -sama dengan keseluruhan adegan. Ini menjadikan kanvas sesuai untuk permainan atau aplikasi intensif grafik seperti perisian penyuntingan foto.

Bagaimana saya boleh menambah teks ke kanvas?

Menambah teks ke kanvas adalah mudah. Anda boleh menggunakan kaedah FillText (Text, X, Y), di mana teks adalah rentetan yang anda ingin tulis, dan x dan y adalah koordinat di mana teks akan bermula. Anda juga boleh menyesuaikan fon, saiz, dan warna teks menggunakan sifat font dan fillstyle.

Bolehkah saya menggunakan kanvas HTML5 untuk pembangunan permainan? Sifat berasaskan piksel menjadikannya sesuai untuk mewujudkan permainan yang kompleks dan intensif grafik yang berjalan lancar di penyemak imbas. Walau bagaimanapun, untuk permainan 3D, WebGL, yang juga menggunakan API kanvas, akan menjadi pilihan yang lebih baik kerana keupayaan pecutan perkakasannya. Menyediakan beberapa kaedah untuk menarik bentuk. Sebagai contoh, untuk melukis segi empat tepat, anda boleh menggunakan kaedah fillrect (x, y, lebar, ketinggian). Untuk melukis bulatan, anda boleh menggunakan kaedah arka (x, y, radius, startangle, dillangle). Anda juga boleh menarik bentuk kompleks menggunakan laluan.

Bagaimana saya boleh menghidupkan objek dengan kanvas html5? kedua. Setiap redraw dipanggil bingkai, dan perubahan kepada sifat objek dibuat antara bingkai untuk mencipta ilusi pergerakan. Ini biasanya dilakukan dengan menggunakan kaedah RequestAnimationFrame (). Ini bermakna anda tidak boleh melampirkan pengendali acara kepada mereka secara langsung. Walau bagaimanapun, anda boleh mencapai interaktiviti dengan menjejaki sifat objek di JavaScript dan menyusun semula kanvas apabila interaksi berlaku. Simpan kandungan kanvas sebagai imej menggunakan kaedah Todataurl (). Kaedah ini mengembalikan url data yang mengandungi perwakilan imej dalam format yang ditentukan oleh parameter jenis (lalai ke png).

Bagaimana saya dapat membersihkan kanvas? Kanvas menggunakan kaedah clearRect (x, y, lebar, ketinggian). Untuk membersihkan seluruh kanvas, anda boleh menetapkan x dan y ke 0, dan lebar dan ketinggian ke lebar dan ketinggian kanvas.

Bolehkah saya menggunakan kanvas HTML5 dalam semua penyemak imbas? Kanvas disokong dalam semua pelayar moden, termasuk Chrome, Firefox, Safari, Opera, dan Edge. Walau bagaimanapun, ia tidak disokong dalam Internet Explorer 8 atau lebih awal.

Bagaimana saya boleh mengendalikan kesilapan dalam kanvas HTML5? Walau bagaimanapun, kerana kanvas adalah API peringkat rendah, ia tidak memberikan mesej ralat terperinci. Oleh itu, debugging boleh mencabar dan sering melibatkan banyak percubaan dan kesilapan.

Atas ialah kandungan terperinci Tutorial Kanvas HTML5: Pengenalan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!