Kanvas vs SVG: Memilih alat yang sesuai untuk pekerjaan-tutorial css-php.cn

HTML5 Canvas vs. SVG: Mana yang dipilih?

Canvas vs SVG: Choosing the Right Tool for the Job

kanvas HTML5 dan SVG adalah berdasarkan teknologi HTML5 standard yang boleh digunakan untuk menghasilkan grafik yang menakjubkan dan kesan visual. Artikel ini membincangkan soalan utama: Teknologi mana yang lebih sesuai untuk dipilih dalam projek ini? Dalam erti kata lain, dalam apa kes anda lebih cenderung menggunakan kanvas HTML5 daripada SVG?

Pertama, mari kita memperkenalkan kanvas HTML5 dan SVG secara ringkas.

mata utama

Apakah kanvas HTML5?

spesifikasi whatwg memperkenalkan elemen kanvas seperti berikut:

Unsur kanvas

menyediakan kanvas bitmap yang bergantung kepada resolusi untuk skrip untuk menjadikan graf, grafik permainan, karya seni, atau imej visual lain dengan cepat.

dengan kata lain, tag

menyediakan permukaan di mana anda boleh membuat dan memanipulasi gambar raster pixel oleh piksel menggunakan antara muka yang boleh diprogramkan oleh JavaScript. <canvas></canvas>

ini adalah contoh kod asas:

(contoh codepen harus tertanam di sini untuk menunjukkan bentuk kanvas asas)

~~Oleh kerana kebergantungan resolusi, imej yang dibuat pada~~

boleh merendahkan kualiti apabila dizum masuk atau dipaparkan pada paparan retina.

<canvas></canvas> Lukisan bentuk mudah hanyalah hujung gunung es. HTML5 Canvas API membolehkan anda melukis arka, laluan, teks, kecerunan, dan banyak lagi. Anda juga boleh mengendalikan Imej Pixel oleh Pixel. Ini bermakna anda boleh menggantikan warna di kawasan tertentu grafik, menghidupkan lukisan anda, dan juga menarik video ke kanvas dan menukar penampilannya.

Apa itu SVG?

SVG mewakili grafik vektor berskala. Menurut spesifikasi:

SVG adalah bahasa yang digunakan untuk menggambarkan grafik dua dimensi. Ia menggunakan sintaks XML apabila digunakan sebagai format mandiri atau apabila dicampur dengan XML yang lain. Apabila dicampur dengan HTML5, ia menggunakan sintaks HTML5 ...

Lukisan SVG boleh menjadi interaktif dan dinamik. Animasi boleh ditakrifkan dan dicetuskan oleh cara deklaratif (iaitu dengan membenamkan elemen animasi SVG dalam kandungan SVG) atau melalui skrip.

SVG adalah format fail XML yang digunakan untuk membuat grafik vektor. Ciri -ciri berskala membolehkannya meningkatkan atau mengurangkan imej vektor sambil mengekalkan kejelasan dan kualiti yang tinggi. (Imej yang dihasilkan oleh kanvas HTML5 tidak dapat melakukan ini).

Berikut adalah persegi merah yang sama dengan menggunakan SVG (dibuat sebelum ini menggunakan kanvas HTML5):

(contoh codepen harus tertanam di sini untuk menunjukkan bentuk SVG asas)

Anda boleh menggunakan SVG untuk melakukan kebanyakan operasi yang boleh dilakukan dengan kanvas, seperti bentuk lukisan dan laluan, kecerunan, corak, animasi, dan banyak lagi. Walau bagaimanapun, kedua -dua teknologi itu berfungsi secara asasnya. Tidak seperti grafik berasaskan kanvas, SVG mempunyai DOM, jadi ia boleh diakses oleh CSS dan JavaScript. Sebagai contoh, anda boleh menggunakan CSS untuk menukar penampilan graf SVG, menghidupkan nodnya menggunakan CSS atau JavaScript, supaya mana -mana bahagian bertindak balas terhadap peristiwa tetikus atau papan kekunci seperti

. Seperti yang akan dilihat dengan lebih jelas di bahagian berikut, perbezaan ini memainkan peranan penting apabila anda perlu memilih antara kanvas dan SVG dalam projek anda yang seterusnya. 
  mod masa nyata dan mod pengekalan  
 adalah penting untuk membezakan antara mod masa nyata dan mod pengekalan. Kanvas HTML5 adalah contoh bekas dan SVG adalah contoh yang terakhir. 
 Mod masa nyata bermakna bahawa sebaik sahaja lukisan anda berada di kanvas, kanvas berhenti menjejakinya. Dalam erti kata lain, sebagai pemaju, anda perlu merumuskan perintah untuk menarik objek, membuat dan mengekalkan model atau senario tentang apa yang kelihatan seperti output, dan menentukan apa yang perlu dikemas kini. API Grafik Pelayar hanya menyampaikan arahan lukisan anda kepada penyemak imbas, dan penyemak imbas melaksanakan arahan tersebut. 
 SVG menggunakan mod pengekalan, anda hanya mengeluarkan arahan lukisan untuk apa yang anda mahu paparkan pada skrin, dan API Grafik Pelayar akan membuat model akhir dalam memori atau adegan dan mengubahnya ke dalam arahan lukisan penyemak imbas. 
 Sebagai sistem grafik segera, kanvas tidak mempunyai model objek DOM atau dokumen. Dengan kanvas, anda melukis piksel dan sistem melupakan semuanya, mengurangkan memori tambahan yang diperlukan untuk mengekalkan model dalaman lukisan. Dengan SVG, setiap objek yang anda lukis ditambah kepada model dalaman penyemak imbas, yang menjadikan hidup anda sedikit lebih mudah sebagai pemaju, tetapi membayar beberapa harga ketika datang ke prestasi. 
 Berdasarkan perbezaan antara mod masa nyata dan mod pengekalan, serta ciri-ciri khusus kanvas dan SVG masing-masing, beberapa situasi di mana menggunakan satu teknologi dan bukannya yang lain mungkin lebih baik melayani matlamat projek. 
  kanvas html5: pro and cons  Spesifikasi kanvas HTML5 dengan jelas mengesyorkan bahawa penulis tidak boleh menggunakan elemen 
 apabila kaedah lain yang lebih sesuai tersedia. <canvas></canvas>
 Sebagai contoh, untuk unsur -unsur yang kaya dengan grafik, alat terbaik adalah HTML dan CSS, bukan  (dengan cara, SVG tidak sama ada). Pandangan ini disahkan oleh Dr Abstrak, pencipta dan pengasas Rangka Kerja Kanvas Zim JS, yang menulis: <canvas></canvas>

 Kerangka DOM dan DOM adalah baik untuk memaparkan maklumat, terutama maklumat teks. Sebaliknya, kanvas adalah gambar. Teks boleh ditambah ke kanvas dan boleh menjadikannya responsif, tetapi teks tidak boleh dipilih atau dicari dengan mudah seperti yang ada di DOM. Halaman teks menatal panjang atau halaman teks dan imej adalah penggunaan yang hebat untuk DOM. DOM sangat sesuai untuk laman media sosial, forum, membeli -belah dan semua aplikasi maklumat yang digunakan untuk digunakan. - "Bila Menggunakan Perpustakaan atau Rangka Kerja Kanvas JavaScript" 

 Jadi di sini adalah contoh yang jelas apabila tidak menggunakan . Tetapi bilakah pilihan yang baik? <canvas></canvas>
<canvas></canvas> (tangkapan skrin tweet Sarah Drasner harus tertanam di sini) 
 
 Apa itu kanvas yang baik?  
 Alvin Wan menanda aras prestasi kanvas dan SVG berdasarkan bilangan objek yang dikeluarkan dan saiz objek atau kanvas itu sendiri. Dia meringkaskan hasilnya seperti berikut: 

 Bagaimanapun, overhead rendering DOM lebih jelas apabila berurusan dengan beratus -ratus atau bahkan ribuan objek; Walau bagaimanapun, kanvas mahupun SVG dipengaruhi oleh saiz objek. Memandangkan statistik akhir, kanvas menawarkan kelebihan yang jelas dari segi prestasi. 

 Berdasarkan apa yang kita tahu mengenai kanvas, terutamanya prestasi yang sangat baik dalam melukis sejumlah besar objek, berikut adalah beberapa senario yang mungkin sesuai atau lebih baik daripada SVG. 
 permainan dan seni generatif 
 Kanvas biasanya merupakan pilihan terbaik untuk permainan yang berintensifkan grafik, sangat interaktif, dan seni generatif. 
 Ray Tracing 
 Ray Tracing adalah teknik untuk membuat grafik 3D. 

 pengesanan sinar boleh digunakan untuk mengisi imej dengan menjejaki laluan sinar piksel dalam satah imej dan mensimulasikan pertemuannya dengan objek maya ... kesan yang dicapai oleh ray mengesan ... berkisar dari ... mencipta realistik Imej dari grafik vektor mudah memohon penapis seperti foto untuk mengeluarkan mata merah. - SVG dan kanvas: Cara memilih, Microsoft Docs. 

 Jika anda ingin tahu, ini adalah aplikasi pengesanan sinar yang Mark Webster sedang berjalan. 
  
Walau bagaimanapun, sementara kanvas HTML5 pastinya lebih sesuai untuk tugas ini daripada SVG, ini tidak semestinya bermakna bahawa pengesanan sinar terbaik dilakukan pada elemen 
. Malah, tekanan pada CPU boleh begitu tinggi sehingga penyemak imbas boleh berhenti bertindak balas. 
 Lukis sebilangan besar objek di permukaan kecil 
 Satu lagi contoh adalah adegan di mana aplikasi perlu menarik sejumlah besar objek pada permukaan yang agak kecil-seperti visualisasi data masa nyata yang tidak interaktif, seperti perwakilan grafik pola cuaca. 
  
 penggantian piksel dalam video 
 Seperti yang ditunjukkan dalam artikel Doktor HTML5 ini, satu lagi contoh yang sesuai untuk menggunakan kanvas adalah untuk menggantikan warna latar belakang video dengan warna yang berbeza, adegan lain, atau imej. 
  
 
 Apakah kanvas HTML5 tidak bagus?  
 Sebaliknya, dalam banyak kes, kanvas mungkin bukan pilihan terbaik berbanding SVG. 
 Skalabiliti 
 Kebanyakan senario di mana skalabiliti adalah kelebihan akan menggunakan SVG lebih baik daripada kanvas. Kesetiaan yang tinggi, grafik kompleks, seperti lukisan seni bina dan kejuruteraan, lukisan organisasi, lukisan biologi, dan lain -lain, adalah contoh keadaan ini. 
 Apabila melukis dengan SVG, membesarkan imej atau mencetak imej akan mengekalkan semua butiran untuk mencapai tahap kualiti yang sangat tinggi. Anda juga boleh menghasilkan dokumen -dokumen ini dari pangkalan data, yang menjadikan format XML SVG sempurna untuk tugas ini. 
 Di samping itu, grafik ini biasanya  interaktif. Sebagai contoh, apabila anda menempah tiket anda dalam talian, pertimbangkan peta tempat duduk, yang menjadikannya kes penggunaan yang sangat baik untuk sistem grafik yang ditahan seperti SVG. 
 Ia Kanvas. 
 Kebolehcapaian 
 Walaupun anda boleh mengambil beberapa langkah untuk meningkatkan kebolehcapaian grafik kanvas - perpustakaan kanvas yang baik (seperti Zim) dapat membantu anda mempercepatkan proses - kanvas tidak bagus ketika datang ke aksesibilitas. Apa yang anda lukis di permukaan kanvas hanyalah sekumpulan piksel yang teknologi bantuan atau robot enjin carian tidak dapat membaca atau mentafsir. Ini adalah satu lagi kawasan yang lebih baik untuk SVG: SVG hanya XML, yang membolehkan kedua -dua manusia dan mesin membacanya. 
 tidak bergantung kepada javascript 
 Jika anda tidak mahu menggunakan JavaScript dalam aplikasi anda, kanvas bukan pilihan terbaik anda. Malah, satu -satunya cara anda menggunakan 
 unsur adalah menggunakan JavaScript. Sebaliknya, anda boleh melukis grafik SVG menggunakan program penyuntingan vektor standard seperti Adobe Illustrator atau Inkscape, dan anda boleh menggunakan CSS tulen untuk mengawal penampilannya dan melakukan animasi yang menarik dan halus. 
  menggabungkan kanvas HTML5 dan SVG untuk senario lanjutan <canvas></canvas> 
 Dalam beberapa kes, aplikasi anda boleh mendapatkan yang terbaik dari kedua -dua dunia dengan menggabungkan kanvas HTML5 dan SVG. Sebagai contoh, permainan berasaskan kanvas boleh menggunakan imej SVG yang dihasilkan oleh program penyuntingan vektor sebagai sprite untuk memanfaatkan skalabiliti mereka dan saiz muat turun yang lebih kecil berbanding dengan imej PNG. Sebagai alternatif, program lukisan boleh merekabentuk antara muka penggunanya menggunakan SVG dan Embed  unsur -unsur untuk lukisan. <canvas></canvas>
 Akhirnya, perpustakaan yang kuat seperti paper.js membolehkan anda menulis skrip grafik vektor di atas kanvas HTML5, memberikan pemaju cara yang mudah untuk menggunakan kedua -dua teknologi pada masa yang sama. 
  Kesimpulan  
 Dalam artikel ini, saya meneroka beberapa ciri utama kanvas HTML5 dan SVG untuk membantu anda menentukan teknologi mana yang terbaik untuk tugas tertentu. 
 apa jawapannya? 
 Chris Coyier bersetuju dengan Benjamin de Cock, yang tweet: 

 Cara yang sangat asas untuk menjawab soalan ini ialah "Gunakan kanvas apabila anda tidak boleh menggunakan SVG" (di mana "tidak boleh" boleh bermakna menghidupkan beribu -ribu objek, memanipulasi setiap piksel secara individu, dll.). Dengan kata lain, SVG harus menjadi pilihan lalai dan kanvas anda adalah pelan sandaran anda. 
 - Benjamin de Cock (@BDC) 2 Oktober 2019 

 DR Abstrak menyediakan senarai banyak perkara terbaik untuk dibina dengan kanvas, termasuk logo interaktif dan pengiklanan, infographics interaktif, aplikasi e-pembelajaran dan banyak lagi. 
 Pada pendapat saya, tidak ada peraturan yang sukar dan cepat apabila ia adalah yang terbaik untuk menggunakan kanvas dan bukannya SVG. Perbezaan antara mod masa nyata dan mod pengekalan menunjukkan bahawa kanvas HTML5 adalah pemenang yang tidak dipertikaikan ketika datang untuk membina permainan intensif grafik, dan SVG lebih baik untuk imej rata, ikon, elemen UI, dll. Walau bagaimanapun, di antara, kanvas HTML5 juga mempunyai ruang untuk mengembangkan skop aplikasi, terutamanya memandangkan pelbagai jenis perpustakaan kanvas yang kuat dapat disediakan. Bukan sahaja mereka memudahkan menggunakan kedua -dua teknologi pada masa yang sama dalam kerja grafik yang sama, tetapi mereka juga membuat beberapa ciri sukar dalam projek asli kanvas (seperti kawalan interaktif dan peristiwa, respons, ciri kebolehaksesan, dan banyak lagi) kini tersedia Untuk ini membuka pintu kepada penggunaan lebih menarik dari kanvas HTML5, yang digunakan oleh kebanyakan pemaju. 
  FAQS untuk kanvas vs SVG 
 (bahagian FAQ harus dimasukkan di sini, ditulis semula mengikut kandungan asal, simpan ringkas dan jelas, dan gunakan lebih banyak bahasa semulajadi.)

Atas ialah kandungan terperinci Kanvas vs SVG: Memilih alat yang sesuai untuk pekerjaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!