Pengenalan kepada JCanvas: JQuery memenuhi kanvas HTML5

dan API JavaScript yang berkaitan.

Dalam siaran ini, saya akan memperkenalkan anda kepada JCanvas, sebuah perpustakaan berasaskan jQuery sumber percuma dan terbuka untuk API kanvas HTML5.

Jika anda membangun dengan jQuery, JCanvas menjadikannya lebih mudah dan lebih cepat untuk kod lukisan kanvas sejuk dan aplikasi interaktif menggunakan sintaks jQuery.

Takeaways Key

JCanvas adalah perpustakaan sumber terbuka yang mengintegrasikan jQuery dengan API kanvas HTML5, memudahkan penciptaan grafik dan aplikasi interaktif menggunakan sintaks jQuery.

• Untuk menggunakan JCanvas, kedua -dua skrip JCanvas dan jQuery mesti dimasukkan ke dalam projek anda, membolehkan penggunaan kaedah JCanvas yang didasarkan pada struktur JQuery. JCanvas meningkatkan API kanvas asli dengan ciri-ciri tambahan seperti lapisan, peristiwa, drag-and-drop, dan animasi, sambil mengekalkan keserasian dengan kaedah kanvas asli.
Lukisan bentuk, teks, dan imej pada kanvas diselaraskan melalui JCanvas, dengan kaedah seperti DrawRect (), DrawArc (), dan DrawImage () yang menerima pelbagai sifat yang disesuaikan.
JCanvas menyokong fungsi lanjutan seperti manipulasi lapisan dan animasi, yang membolehkan ciptaan grafik yang kompleks dan pengalaman pengguna interaktif yang dinamik di laman web.
• Apa itu JCanvas?
• laman web JCanvas menerangkan:

JCanvas adalah perpustakaan JavaScript, yang ditulis menggunakan jQuery dan untuk jQuery, yang membungkus sekitar API kanvas HTML5, menambah ciri dan keupayaan baru, yang kebanyakannya disesuaikan. Keupayaan termasuk lapisan, acara, drag-and-drop, animasi, dan banyak lagi.

Hasilnya adalah API yang fleksibel yang dibungkus dalam sintaks yang manis, jQuery-esque yang membawa kuasa dan kemudahan ke kanvas HTML5.

JCanvas membolehkan anda melakukan semua yang boleh anda lakukan dengan API kanvas asli dan banyak lagi. Jika anda lebih suka, anda juga boleh menggunakan kaedah API kanvas HTML5 asli dengan JCanvas. Kaedah cabutan () berfungsi hanya tujuan ini. Selain itu, anda boleh dengan mudah melanjutkan JCanvas dengan kaedah dan sifat anda sendiri menggunakan ciri Extend ().

Menambah JCanvas ke projek anda

Untuk memasukkan JCanvas dalam projek anda, muat turun skrip dari laman web rasmi atau halaman GitHub, kemudian masukkannya dalam folder projek anda. Seperti yang disebutkan, JCanvas memerlukan jQuery untuk bekerja, jadi pastikan untuk memasukkannya juga.

Fail skrip projek anda akan kelihatan seperti ini:

Yang terakhir adalah di mana anda meletakkan JavaScript tersuai anda menggunakan API JCanvas. Sekarang mari kita ambil JCanvas untuk memandu ujian.

menyediakan dokumen HTML

<scriptjs/jcanvas.min.js><span><span><span></script</span>></span>
</span><scriptjs/jquery.min.js><span><span><span></script</span>></span>
</span><scriptjs/script.js><span><span><span></script</span>></span></span>

Konteks pembolehubah dalam kod di atas menyimpan rujukan kepada sifat konteks 2D objek kanvas. Ia adalah harta ini yang membolehkan anda mengakses semua sifat dan kaedah lain yang terdedah oleh API kanvas HTML5.

Jika anda ingin mengetahui lebih lanjut mengenai topik ini, tutorial kanvas HTML5: Pengenalan oleh Ivaylo Gerchev adalah bacaan yang hebat.

kaedah dan sifat JCanvas sudah mengandungi rujukan kepada konteks 2D, oleh itu anda boleh melompat terus ke dalam lukisan.

Lukisan Bentuk dengan JCanvas

Kebanyakan kaedah JCanvas menerima peta pasangan bernilai harta yang boleh anda senaraikan dalam apa-apa perintah yang anda suka.

mari kita mulakan dengan melukis bentuk segi empat tepat.

Bentuk segi empat tepat

Ini adalah bagaimana anda melukis bentuk segi empat tepat menggunakan kaedah DrawRect () objek JCanvas.

<span><span><span><canvas</span> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></span>
</span>  <span><span><span><p</span>></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></p</span>></span>
</span><span><span><span></canvas</span>></span></span>

coretan di atas cache objek kanvas ke dalam pembolehubah yang dipanggil $ mycanvas. Ciri-ciri di dalam kaedah DrawRect () kebanyakannya jelas, tetapi inilah rundown ringkas:

• Fillstyle menetapkan warna latar belakang segi empat tepat;
• StrokeStyle menetapkan warna sempadannya;
• strokewidth menetapkan lebar sempadan bentuk;
• x dan y Tetapkan koordinat yang sepadan dengan kedudukan mendatar dan menegak segi empat tepat di dalam kanvas. Nilai 0 untuk x dan 0 untuk y , i.e., (0, 0), sepadan dengan sudut kiri atas kanvas. Koordinat X meningkat ke kanan dan koordinat Y meningkat ke arah bawah kanvas. Apabila melukis segi empat tepat, secara lalai, JCanvas mengambil koordinat X dan Y untuk berbaring di tengah -tengah bentuk.
• Untuk menukar ini supaya x dan y sesuai dengan sudut kiri atas segi empat tepat, tetapkan harta benda dari Palsu.
• Akhirnya, sifat lebar dan ketinggian menetapkan dimensi segi empat tepat.

Berikut adalah demo dengan bentuk segi empat tepat:

Lihat contoh pen JCanvas: Rectangle oleh SitePoint (@SitePoint) pada codepen.

arka dan lingkaran

arka adalah bahagian rim bulatan. Dengan JCanvas, lukisan arka hanyalah satu perkara yang menetapkan nilai yang dikehendaki untuk beberapa sifat di dalam kaedah Drawarc ():

<script src="js/jquery.min.js><span><span><span></script</span>></span>
</span><script src="js/jcanvas.min.js><span><span><span></script</span>></span>
</span><script src="js/script.js><span><span><span></script</span>></span></span>

Lukisan arka melibatkan penetapan nilai untuk harta radius serta sudut permulaan dan akhir dalam darjah. Jika anda ingin arah arka anda menjadi lawan jam, tambahkan harta CCW ke kod di atas dan tetapkannya kepada benar.

Berikut adalah demo codepen kod di atas:

Lihat contoh pen JCanvas: Arc oleh SitePoint (@SitePoint) pada codepen.

Melukis bulatan semudah menghilangkan sifat permulaan dan akhir dari kaedah Drawarc ().

contohnya, inilah caranya anda boleh menarik grafik ringkas wajah tersenyum menggunakan hanya bentuk arka:

<span><span><span><canvas</span> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></span>
</span>  <span><span><span><p</span>></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></p</span>></span>
</span><span><span><span></canvas</span>></span></span>

ingat bahawa JCanvas didasarkan pada perpustakaan jQuery, oleh itu anda boleh mengikat kaedah JCanvas dengan cara yang sama anda boleh mengikat kaedah jQuery.

Inilah cara kod di atas membuat penyemak imbas:

Lihat contoh pen JCanvas: Senyum muka oleh SitePoint (@SitePoint) pada codepen.

lukisan garis dan laluan

Anda boleh dengan cepat melukis garis dengan JCanvas menggunakan kaedah drawline () dan merancang satu siri mata yang mana garis anda akan menyambung.

<span>var canvas = document.getElementById('myCanvas'),
</span>    context <span>= canvas.getContext('2d');</span>

Kod di atas menetapkan sifat bulat dan tertutup untuk benar, dengan itu membulatkan sudut garis dan menutup jalan yang dikesan.

Lihat contoh pen JCanvas: garis yang disambungkan oleh sitepoint (@sitePoint) pada codepen.

Anda juga boleh melukis laluan fleksibel menggunakan kaedah DrawPath (). Fikirkan jalan sebagai satu atau lebih garis, arka, lengkung, atau vektor yang bersambung.

Kaedah DrawPath () menerima peta mata dan peta koordinat X dan Y untuk sub-laluan di dalam setiap titik. Anda juga perlu menentukan jenis laluan yang akan anda lukis, mis., Line, Arc, dan lain -lain

Berikut adalah cara anda dapat menarik sepasang anak panah yang menunjuk secara mendatar dan menegak menggunakan DrawPath () dan menarik anak panah (), yang terakhirnya adalah kaedah JCanvas yang berguna yang membolehkan anda dengan cepat melukis bentuk anak panah pada kanvas:

<span>// Store the canvas object into a variable
</span><span>var $myCanvas = $('#myCanvas');
</span>
<span>// rectangle shape 
</span>$myCanvas<span>.drawRect({
</span>  <span>fillStyle: 'steelblue',
</span>  <span>strokeStyle: 'blue',
</span>  <span>strokeWidth: 4,
</span>  <span>x: 150, y: 100,
</span>  <span>fromCenter: false,
</span>  <span>width: 200,
</span>  <span>height: 100
</span><span>});</span>

koordinat x dan y setiap sub-jalur adalah relatif kepada koordinat x dan y dari keseluruhan jalan.

Dan inilah hasilnya:

Lihat contoh pen JCanvas: anak panah yang disambungkan oleh sitepoint (@sitePoint) pada codepen.

Lukisan Teks

Anda boleh dengan cepat menarik teks pada kanvas dengan kaedah DrawText () yang bernama Aptly. Ciri -ciri utama yang anda perlukan untuk ini berfungsi ialah:

• teks. Tetapkan harta ini ke kandungan teks yang anda ingin paparkan pada kanvas: mis. 'Hello World'
• fontsize. Nilai untuk harta ini menentukan saiz teks pada kanvas. Anda boleh menetapkan nilai untuk harta ini dengan nombor, yang JCanvas menafsirkan sebagai nilai dalam piksel: fontsize: 30. '
• fontfamily membolehkan anda menentukan jenis huruf untuk imej teks anda: 'verdana, sans-serif'.

inilah kod sampel:

<script src="js/jquery.min.js><span><span><span></script</span>></span>
</span><script src="js/jcanvas.min.js><span><span><span></script</span>></span>
</span><script src="js/script.js><span><span><span></script</span>></span></span>

dan inilah yang kelihatan seperti di dalam elemen di laman web:

Lihat contoh pen JCanvas: Lukisan teks oleh SitePoint (@SitePoint) pada codepen.

gambar gambar

Anda boleh mengimport dan memanipulasi imej menggunakan kaedah DrawImage (). Berikut adalah contoh:

<span><span><span><canvas</span> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></span>
</span>  <span><span><span><p</span>></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></p</span>></span>
</span><span><span><span></canvas</span>></span></span>

dan ini adalah bagaimana kod di atas membuat:

Lihat contoh pen JCanvas: Mengimport dan memanipulasi imej oleh SitePoint (@SitePoint) pada Codepen.

anda boleh melihat dan biola dengan semua contoh di atas digabungkan ke dalam demo codepen tunggal di sini.

Lapisan Kanvas

Jika anda pernah menggunakan aplikasi editor imej seperti Photoshop atau GIMP, anda sudah biasa dengan lapisan. Bahagian keren bekerja dengan lapisan ialah anda mendapat keupayaan untuk memanipulasi setiap imej pada kanvas anda secara individu, dengan menariknya pada lapisannya sendiri.

JCanvas menawarkan API lapisan yang kuat yang menambah fleksibiliti kepada reka bentuk berasaskan kanvas anda.

Berikut adalah gambaran keseluruhan bagaimana menggunakan lapisan JCanvas.

Menambah lapisan

anda hanya boleh menarik satu objek pada setiap lapisan. Anda boleh menambah lapisan ke projek JCanvas anda dalam kedua -dua cara:

• Gunakan kaedah addLayer () diikuti dengan kaedah DrawLayers ()
• Tetapkan harta lapisan ke benar di dalam mana -mana kaedah lukisan

Berikut adalah cara anda menggunakan teknik pertama untuk melukis segi empat tepat biru.

<span>var canvas = document.getElementById('myCanvas'),
</span>    context <span>= canvas.getContext('2d');</span>

lihat pena pzengp oleh sitepoint (@sitePoint) pada codepen.

Dan inilah cara anda menggunakan kaedah kedua untuk melukis segi empat tepat yang sama:

<span>// Store the canvas object into a variable
</span><span>var $myCanvas = $('#myCanvas');
</span>
<span>// rectangle shape 
</span>$myCanvas<span>.drawRect({
</span>  <span>fillStyle: 'steelblue',
</span>  <span>strokeStyle: 'blue',
</span>  <span>strokeWidth: 4,
</span>  <span>x: 150, y: 100,
</span>  <span>fromCenter: false,
</span>  <span>width: 200,
</span>  <span>height: 100
</span><span>});</span>

Lihat pena Zrjqkb oleh SitePoint (@SitePoint) pada codepen.

seperti yang anda lihat, dengan setiap perkara di atas, kami mendapat hasil yang sama.

Titik penting untuk diperhatikan dalam kedua -dua sampel kod di atas adalah bahawa lapisan mempunyai nama yang anda tetapkan melalui Nama Harta. Ini menjadikannya mudah untuk merujuk kepada lapisan ini dalam kod dan melakukan pelbagai perkara yang sejuk dengannya, seperti menukar nilai indeksnya, menghidupkannya, mengeluarkannya, dan lain -lain

mari kita lihat bagaimana kita boleh melakukan ini.

Lapisan animasi

Anda boleh dengan cepat menambah animasi ke lukisan berasaskan lapisan anda dengan JCanvas menggunakan kaedah AnimateLayer (). Kaedah ini menerima parameter berikut:

• Lapisan indeks atau nama
• Objek dengan pasangan nilai utama sifat untuk menghidupkan
• Tempoh animasi dalam milisaat. Ini adalah parameter pilihan, jika anda tidak menetapkannya, ia mungkir kepada 400
• pelonggaran animasi. Ini juga merupakan parameter pilihan, jika anda tidak menetapkannya, ia mungkir untuk swing
• Fungsi panggil balik pilihan yang berjalan apabila animasi selesai.

mari kita lihat kaedah animatelayer () dalam tindakan. Kami akan melukis bulatan oren separa telus pada lapisan, kemudian menghidupkan kedudukan, warna, dan sifat opacity:

<script src="js/jquery.min.js><span><span><span></script</span>></span>
</span><script src="js/jcanvas.min.js><span><span><span></script</span>></span>
</span><script src="js/script.js><span><span><span></script</span>></span></span>

lihat demo di bawah untuk melihat animasi:

Lihat contoh pen JCanvas: Lapisan Animasi oleh SitePoint (@SitePoint) pada codepen.

anda boleh melihat ketiga -tiga contoh terdahulu yang digabungkan dalam demo codepen ini.

Lapisan Draggable

Satu lagi ciri yang lebih sejuk yang saya ingin menarik perhatian anda ialah keupayaan untuk mengubah lapisan JCanvas biasa ke dalam lapisan draggable dengan hanya menetapkan sifat draggable lapisan menjadi benar.

inilah caranya:

<span><span><span><canvas</span> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></span>
</span>  <span><span><span><p</span>></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></p</span>></span>
</span><span><span><span></canvas</span>></span></span>

Coretan di atas menarik dua lapisan segi empat tepat draggable dengan menggabungkan: draggable: benar. Juga, perhatikan penggunaan harta BringTofront, yang memastikan bahawa apabila anda menyeret lapisan, ia secara automatik akan ditolak ke hadapan semua lapisan sedia ada yang lain.

Akhirnya, kod itu berputar lapisan dan menetapkan bayangan kotak, hanya untuk menunjukkan bagaimana anda dapat dengan cepat menambah kesan ini ke lukisan JCanvas anda.

Hasilnya kelihatan seperti ini:

Jika anda ingin aplikasi anda melakukan sesuatu sebelum, semasa, atau selepas menggerakkan lapisan draggable, JCanvas menjadikannya mudah untuk menyelesaikannya dengan menyokong fungsi panggilan balik semasa peristiwa yang berkaitan:

Dragstart mencetuskan apabila anda mula menyeret lapisan
seret kebakaran semasa anda menyeret lapisan
Dragstop mencetuskan apabila anda berhenti menyeret lapisan
Dragcancel berlaku apabila anda menyeret lapisan dari sempadan permukaan lukisan kanvas.

Katakan anda ingin memaparkan mesej pada halaman selepas pengguna selesai menyeret lapisan. Anda boleh menggunakan semula coretan kod di atas dengan menambahkan fungsi panggil balik ke acara Dragstop, seperti SO:

<script src="js/jquery.min.js><span><span><span></script</span>></span>
</span><script src="js/jcanvas.min.js><span><span><span></script</span>></span>
</span><script src="js/script.js><span><span><span></script</span>></span></span>

Selepas menyeret setiap persegi, anda akan melihat mesej di halaman yang memberitahu anda warna persegi yang anda hanya jatuh. Cubalah dalam demo di bawah:

Lihat lapisan JCanvas Draggable dengan fungsi panggil balik oleh SitePoint (@SitePoint) pada Codepen.

Kesimpulan

Dalam jawatan ini saya telah memperkenalkan anda kepada JCanvas, sebuah perpustakaan berasaskan jQuery baru yang berfungsi dengan API Kanvas HTML5. Saya telah menggambarkan beberapa kaedah dan sifat JCanvas yang dengan cepat membolehkan anda melukis permukaan kanvas, menambah kesan visual, animasi, dan lapisan draggable.

Terdapat lebih banyak lagi yang boleh anda lakukan dengan JCanvas. Anda boleh melawat dokumentasi JCanvas untuk panduan dan contoh terperinci, yang anda dapat dengan cepat menguji di kotak pasir di laman web JCanvas.

Untuk menemani artikel ini, saya telah mengumpulkan aplikasi lukisan asas pada Codepen menggunakan kaedah JCanvas Drawline ():

lihat aplikasi lukisan pena jCanvas oleh sitepoint (@sitePoint) pada codepen.

Jangan ragu untuk menjadikannya lebih baik dengan menambahkan lebih banyak ciri dan berkongsi hasil anda dengan komuniti SitePoint.

Soalan Lazim (Soalan Lazim) Mengenai JCanvas: JQuery Meets Html5 Canvas

Apakah JCanvas dan bagaimana ia berkaitan dengan JQuery dan HTML5 Canvas? . Ia memanfaatkan kesederhanaan dan fleksibiliti JQuery, perpustakaan JavaScript yang cepat, kecil, dan kaya ciri, dan kuasa grafik kanvas HTML5, yang merupakan elemen HTML yang digunakan untuk menarik grafik pada halaman web. JCanvas menyediakan API yang mudah dan konsisten untuk melukis bentuk, mencipta animasi, acara pengendalian, dan banyak lagi. Untuk memasukkan Perpustakaan JQuery dan Perpustakaan JCanvas dalam fail HTML anda. Anda boleh memuat turun perpustakaan ini dari laman web masing -masing atau menggunakan rangkaian penghantaran kandungan (CDN). Sebaik sahaja anda telah memasukkan perpustakaan ini, anda boleh mula menggunakan fungsi JCanvas untuk menarik pada kanvas.

Bagaimana saya boleh menarik bentuk menggunakan JCanvas? Sebagai contoh, anda boleh menggunakan fungsi DrawRect () untuk melukis segi empat tepat, fungsi DrawArc () untuk menarik arka, dan fungsi DrawPolygon () untuk menarik poligon. Setiap fungsi ini menerima objek sifat yang menentukan ciri -ciri bentuk, seperti kedudukan, saiz, warna, dan sebagainya.

Bolehkah saya menghidupkan bentuk dengan JCanvas?

Ya, JCanvas menyediakan ciri animasi yang kuat yang membolehkan anda menghidupkan bentuk pada kanvas. Anda boleh menggunakan fungsi Animate () untuk menghidupkan sifat -sifat bentuk sepanjang tempoh yang ditentukan. Fungsi ini menggunakan enjin animasi jQuery, jadi ia menyokong semua fungsi pelonggaran yang disediakan oleh jQuery. Sebagai contoh, anda boleh menggunakan fungsi klik () untuk mengendalikan peristiwa klik, fungsi Mouseover () untuk mengendalikan peristiwa tetikus, dan fungsi mousedown () untuk mengendalikan peristiwa mousedown. Setiap fungsi ini menerima fungsi panggil balik yang dipanggil apabila peristiwa berlaku. di laman web. Ia menyediakan pelbagai fungsi untuk menarik bentuk, membuat animasi, mengendalikan peristiwa, dan banyak lagi. Dengan JCanvas, anda boleh membuat apa -apa dari bentuk mudah ke animasi kompleks dan grafik interaktif.

Adakah JCanvas serasi dengan semua pelayar? Ini termasuk versi terbaru Google Chrome, Mozilla Firefox, Apple Safari, dan Microsoft Edge. Walau bagaimanapun, ia tidak menyokong Internet Explorer 8 atau lebih awal, kerana pelayar ini tidak menyokong elemen kanvas HTML5.

Bagaimana saya boleh menyelesaikan masalah dengan JCanvas? Anda boleh menyemak konsol untuk mesej ralat, kerana JCanvas menyediakan mesej ralat terperinci untuk membantu anda menyelesaikan masalah. Anda juga boleh merujuk kepada dokumentasi JCanvas, yang memberikan maklumat yang komprehensif mengenai perpustakaan dan fungsinya. Yang bermaksud anda boleh menggunakannya dalam kedua -dua projek peribadi dan komersial secara percuma. Walau bagaimanapun, anda mesti memasukkan notis hak cipta asal dan penafian dalam mana -mana salinan perisian atau dokumentasinya. Laman web rasminya, yang menyediakan dokumentasi, contoh, dan tutorial yang komprehensif. Anda juga boleh mendapatkan maklumat berguna di laman web dan forum pembangunan web, seperti Stack Overflow dan SitePoint.

Atas ialah kandungan terperinci Pengenalan kepada JCanvas: JQuery memenuhi kanvas HTML5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!