


Pengenalan kepada SVG 2D dalam HTML5 13—svg lwn. kanvas dan analisis kekuatan serta scenario_html5 yang berkenaan kemahiran tutorial
Setakat ini, ciri utama SVG dan Canvas telah diringkaskan. Kesemuanya ialah teknologi paparan grafik 2D yang disokong dalam HTML5, dan semuanya menyokong grafik vektor. Sekarang, mari kita bandingkan kedua-dua teknologi ini dan menganalisis kekuatannya serta senario yang boleh digunakan.
Mula-mula, mari analisa ciri-ciri penting kedua-dua teknologi, lihat jadual di bawah:
Canvas | SVG |
---|---|
基于像素(动态 .png) | 基于形状 |
单个 HTML 元素 | 多个图形元素,这些元素成为 DOM 的一部分 |
仅通过脚本修改 | 通过脚本和 CSS 修改 |
事件模型/用户交互颗粒化 (x,y) | 事件模型/用户交互抽象化 (rect, path) |
图面较小时、对象数量较大 (>10k)(或同时满足这二者)时性能更佳 | 对象数量较小 ( |
Seperti yang dapat dilihat daripada perbandingan di atas: Kanvas mempunyai kelebihan yang kuat dalam manipulasi piksel dan kelebihan terbesar SVG ialah interaktiviti dan kebolehkendaliannya yang mudah. Penggunaan Kanvas sangat dipengaruhi oleh saiz kanvas (sebenarnya bilangan piksel), manakala penggunaan SVG sangat dipengaruhi oleh bilangan objek (bilangan elemen). Kanvas dan SVG juga berbeza dalam cara ia diubah suai. Setelah objek Canvas dilukis, ia tidak boleh diubah suai menggunakan skrip dan CSS. Objek SVG ialah sebahagian daripada model objek dokumen, jadi ia boleh diubah suai pada bila-bila masa menggunakan skrip dan CSS.
Malah, Kanvas ialah sistem grafik mod masa nyata berasaskan piksel Selepas melukis objek, ia tidak menyimpan objek ke memori Apabila objek itu diperlukan lagi, ia perlu dilukis semula sistem grafik mod tertahan berasaskan bentuk Selepas lukisan, objek perlu dilukis semula. Perbezaan asas ini membawa kepada banyak senario aplikasi yang berbeza.
Kami juga boleh mengalaminya dalam aplikasi biasa berikut.
Dokumen ketelitian tinggi
Aspek ini mudah difahami Untuk menyemak imbas dokumen tanpa herot semasa menskala, atau untuk mencetak dokumen berkualiti tinggi, SVG biasanya diutamakan, seperti perkhidmatan peta. .
Sumber imej statik
SVG sering digunakan untuk imej ringkas, sama ada imej dalam aplikasi atau halaman web, imej besar atau imej kecil. Memandangkan SVG perlu dimuatkan ke dalam DOM, atau sekurang-kurangnya dihuraikan sebelum mencipta imej, akan terdapat sedikit penurunan prestasi, tetapi berbanding dengan kos pemaparan halaman web (mengikut susunan beberapa milisaat), kecekapan ini kerugian adalah sangat kecil.
Dari segi saiz fail (untuk tujuan menilai trafik rangkaian), saiz imej SVG tidak jauh berbeza dengan imej png. Tetapi kerana SVG sebagai format imej boleh berskala, jika pembangun ingin menggunakan imej pada skala yang lebih besar, atau pengguna menggunakan skrin DPI tinggi, menggunakan SVG adalah pilihan yang agak baik.
Operasi Pixel
Anda boleh mendapatkan kelajuan lukisan yang pantas apabila menggunakan Kanvas tanpa mengekalkan maklumat elemen yang sepadan. Terutama apabila operasi piksel perlu diproses, prestasinya lebih baik. Aplikasi jenis ini pada asasnya memilih teknologi Kanvas.
Data Langsung
Kanvas bagus untuk visualisasi data masa nyata bukan interaktif. Seperti data cuaca masa nyata.
Carta dan graf
Anda boleh menggunakan SVG atau Canvas untuk melukis graf dan carta yang berkaitan, tetapi jika anda ingin menekankan kebolehkendalian, SVG sudah pasti pilihan terbaik Jika interaktiviti tidak diperlukan, tekankan Untuk prestasi, Kanvas lebih sesuai.
Permainan dua dimensi
Oleh kerana kebanyakan permainan dibangunkan menggunakan API peringkat rendah, Kanvas lebih mudah diterima. Tetapi sebenarnya, apabila melukis adegan permainan, Kanvas perlu berulang kali melukis dan meletakkan bentuk, manakala SVG dikekalkan dalam ingatan, dan sangat mudah untuk mengubah suai atribut yang berkaitan, jadi SVG juga merupakan pilihan yang baik.
Hampir tiada perbezaan prestasi antara Kanvas dan SVG apabila mencipta permainan dengan beberapa objek pada papan permainan kecil. Walau bagaimanapun, apabila lebih banyak objek dicipta, kod Kanvas akan berkembang dengan ketara lebih besar. Permainan kanvas diperlahankan kerana objek Kanvas mesti dilukis semula setiap kali permainan berputar.
Reka bentuk antara muka pengguna
Disebabkan interaktiviti yang baik, SVG sudah pasti unggul. Dengan memanfaatkan paparan grafik mod terpelihara SVG, anda boleh mencipta semua butiran antara muka pengguna dalam penanda seperti HTML dalam badan. Oleh kerana setiap elemen dan sub-elemen SVG boleh bertindak balas kepada acara berasingan, anda boleh mencipta antara muka pengguna yang kompleks dengan sangat mudah. Kanvas, sebaliknya, memerlukan anda mengikuti urutan kod yang lebih kompleks untuk menentukan cara membuat setiap bahagian antara muka pengguna. Urutan yang perlu anda ikuti ialah:
• Dapatkan konteks.
•Mula melukis.
•Nyatakan warna setiap baris dan setiap isian.
• Tentukan bentuk.
•Selesai lukisan.
Selain itu, Kanvas hanya boleh mengendalikan acara untuk keseluruhan kanvas. Jika anda mempunyai antara muka pengguna yang lebih kompleks, anda perlu menentukan koordinat tempat anda mengklik pada kanvas. SVG boleh mengendalikan acara untuk setiap elemen kanak-kanak secara individu.
Dua contoh berikut masing-masing menggambarkan kelebihan teknikal kanvas dan svg:
Aplikasi biasa kanvas seperti skrin hijau: http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasgreenscreen.htm
Rendering adalah seperti berikut:
Selepas membuka halaman, anda boleh melihat kod sumber halaman.
Aplikasi ini membaca dan menulis piksel daripada dua video ke video lain Kod ini menggunakan dua video, dua kanvas dan kanvas akhir. Tangkap video satu bingkai pada satu masa dan lukiskannya pada dua kanvas berasingan, membolehkan data dibaca semula:
ctxSource1.drawImage(video1, 0, 0, videoWidth, videoHeight);
ctxSource2.drawImage(video2, 0, 0, videoWidth, videoHeight);
Oleh itu, Langkah seterusnya adalah untuk mendapatkan semula data bagi setiap imej yang dilukis supaya setiap piksel individu boleh diperiksa:
Sebaik sahaja
akan menyemak imbas tatasusunan piksel skrin hijau, mencari piksel hijau dan jika ditemui, kod itu akan menggantikan semua piksel hijau dengan piksel dari latar belakang. :
// Dapatkan RBG untuk setiap piksel:
r = currentFrameSource1.data[i * 4 0];
g = currentFrameSource1.data[i * 4 1 ];
b = currentFrameSource1.data[i * 4 2];
// Jika ini kelihatan seperti piksel hijau gantikannya:
jika ( (r >= 0 && r = 74 && g = 0 && b {
pixelIndex = i * 4;
currentFrameSource1.data[pixelIndex] = currentFrameSource2.data[pixelIndex];
currentFrameSource1.data[pixelIndex 1] = currentIndex.data 1];
currentFrameSource1.data[pixelIndex 2] = currentFrameSource2.data[pixelIndex 2];
currentFrameSource1.data[pixelIndex 3] = currentFrameSource2.data[pixelIndex 3]>>
Akhir sekali, tatasusunan piksel akan ditulis pada kanvas sasaran:
Salin kod
:
Salin kod
> ;
< ;h1>
Antara Muka Pengguna SVG
< ;svg height="200" width="200" >
Klik pada antara muka pengguna bulatan emas elemen.
Walaupun contoh ini mudah, ia mempunyai semua ciri antara muka pengguna Daripada contoh ini, kami sekali lagi menghargai interaktiviti svg .
Akhir sekali, gunakan gambar untuk meringkaskan teknologi yang sesuai untuk setiap aplikasi Setiap kotak dalam gambar mewakili jenis aplikasi, semakin besar kelebihan menggunakan teknologi ini:
Rujukan praktikal:
Indeks skrip:
Pusat Pembangunan: https://developer.mozilla.org/en/SVG
Rujukan Popular: http://www.chinasvg.com/
Dokumentasi rasmi: http://www.w3.org/TR/SVG11/

Piawaian dan teknologi web telah berkembang dari HTML4, CSS2 dan JavaScript mudah setakat ini dan telah menjalani perkembangan yang ketara. 1) HTML5 memperkenalkan API seperti kanvas dan webstorage, yang meningkatkan kerumitan dan interaktiviti aplikasi web. 2) CSS3 menambah fungsi animasi dan peralihan untuk menjadikan halaman lebih berkesan. 3) JavaScript meningkatkan kecekapan pembangunan dan kebolehbacaan kod melalui sintaks moden node.js dan ES6, seperti fungsi anak panah dan kelas. Perubahan ini telah mempromosikan pembangunan pengoptimuman prestasi dan amalan terbaik aplikasi web.

H5 bukan sekadar singkatan HTML5, ia mewakili ekosistem teknologi pembangunan web moden yang lebih luas: 1. H5 termasuk HTML5, CSS3, JavaScript dan API dan Teknologi yang berkaitan; 2. Ia menyediakan pengalaman pengguna yang lebih kaya, interaktif dan lancar, dan boleh berjalan dengan lancar pada pelbagai peranti; 3. Menggunakan timbunan teknologi H5, anda boleh membuat laman web responsif dan fungsi interaktif yang kompleks.

H5 dan HTML5 merujuk kepada perkara yang sama, iaitu HTML5. HTML5 adalah versi kelima HTML, membawa ciri -ciri baru seperti tag semantik, sokongan multimedia, kanvas dan grafik, penyimpanan luar talian dan penyimpanan tempatan, meningkatkan ekspresi dan interaktiviti laman web.

H5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enhancusexperienceaceacrossdevices.3) SemantikelementsImproveContentstructureandseo.4) H5'srespo

Alat dan kerangka yang perlu dikuasai dalam pembangunan H5 termasuk Vue.js, React dan Webpack. 1.vue.js sesuai untuk membina antara muka pengguna dan menyokong pembangunan komponen. 2. Leact mengoptimumkan rendering halaman melalui DOM maya, sesuai untuk aplikasi yang kompleks. 3.WebPack digunakan untuk pembungkusan modul dan mengoptimumkan beban sumber.

Html5hassignificlylylectransformedwebdevelopmentbyintroducingsemanticelements, enhancingmultimediasupport, andimprovingperformance.1) itmadewebebsitesmoreaccessibleandseo-friendlywithSemhyViVeShive, dan

H5 meningkatkan kebolehaksesan laman web dan kesan SEO melalui unsur -unsur semantik dan atribut ARIA. 1. Gunakan, dan lain -lain untuk mengatur struktur kandungan dan meningkatkan SEO. 2. Atribut Aria seperti ARIA-Label meningkatkan kebolehcapaian, dan pengguna teknologi bantuan boleh menggunakan laman web dengan lancar.

"H5" dan "HTML5" adalah sama dalam kebanyakan kes, tetapi mereka mungkin mempunyai makna yang berbeza dalam senario tertentu tertentu. 1. "HTML5" adalah standard yang ditentukan oleh W3C yang mengandungi tag dan API baru. 2. "H5" biasanya merupakan singkatan HTML5, tetapi dalam pembangunan mudah alih, ia boleh merujuk kepada rangka kerja berdasarkan HTML5. Memahami perbezaan ini membantu menggunakan istilah ini dengan tepat dalam projek anda.


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Dreamweaver CS6
Alat pembangunan web visual

Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini

MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna