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>

(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"

. Tetapi bilakah pilihan yang baik? <canvas></canvas> <canvas></canvas> (tangkapan skrin tweet Sarah Drasner harus tertanam di sini)

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:

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.

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.

Sebaliknya, dalam banyak kes, kanvas mungkin bukan pilihan terbaik berbanding SVG.

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

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>

Kesimpulan

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

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.)