Apakah kaedah lukisan dalam html5

Kaedah lukisan dalam HTML5: 1. Gunakan kanvas, yang berdasarkan piksel dan menyediakan fungsi lukisan 2D Ia bergantung pada HTML untuk melukis corak melalui skrip 2. Gunakan grafik vektor SVG, yang menyediakan satu siri grafik elemen Sesuai untuk paparan imej statik, paparan dokumen jaminan tinggi dan senario aplikasi percetakan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.

Terdapat dua kaedah lukisan dalam html5: Kanvas dan SVG.

Kanvas dan SVG adalah disyorkan dan utama dalam HTML5teknologi lukisan grafik 2D

Apakah itu Kanvas

• <canvas> Komponen baharu H5 adalah seperti tirai, di mana anda boleh menggunakan skrip (biasanya Javascript) untuk melukis elemen grafik HTML Ia boleh digunakan untuk mencipta pelbagai carta, jadual atau beberapa animasi.
• Teknologi kanvas agak baharu dan memfokuskan pada pemprosesan imej raster.

Apakah itu SVG?

• SVG ialah bahasa grafik vektor bebas yang telah menjadi standard W3C selama lebih daripada sepuluh tahun
• Berdasarkan XML Bahasa Penanda Boleh Diperluas

Perbezaan. :

• Kanvas adalah berdasarkan piksel dan menyediakan fungsi lukisan 2D Ia adalah jenis elemen HTML yang bergantung pada HTML dan hanya boleh melukis corak melalui skrip; >

  SVG ialah imej vektor, menyediakan satu siri elemen grafik
; ia juga mempunyai animasi lengkap dan mekanisme masa, yang boleh digunakan secara bebas atau dibenamkan dalam HTML.

• （Rect，Path，Circle，Line...）

  Kanvas dipaparkan piksel demi piksel Setelah grafik selesai, ia tidak lagi diberi perhatian oleh penyemak imbas.

• SVG dipaparkan melalui manipulasi DOM.

• Perbandingan fungsi:

Kanvas menyediakan lebih banyak fungsi asli, pemaparan dinamik dan lukisan volum data yang besar

Bergantung pada peleraian

• Tidak menyokong pengendali acara

• Kanvas dipaparkan piksel demi piksel setelah grafik Selepas lukisan selesai, ia tidak lagi akan diberi perhatian oleh penyemak imbas, jadi keupayaan pemaparan teks adalah lemah

• Imej hasil boleh disimpan dalam format .png atau .jpg

• Kanvas paling sesuai untuk permainan intensif grafik dengan banyak objek yang perlu dilukis semula dengan kerap

• Sesuai untuk kawasan kecil, bilangan besar adegan

SVG mempunyai fungsi yang lebih lengkap dan sesuai untuk paparan imej statik, paparan dokumen jaminan tinggi dan senario aplikasi pencetakan

Tidak bergantung pada resolusi

• Menyokong pengendali acara

• SVG dipaparkan melalui manipulasi DOM, kebanyakannya sesuai untuk aplikasi dengan kawasan pemaparan yang besar (seperti Peta Google)

• Kerumitan yang tinggi akan memperlahankan kelajuan pemaparan (sebarang aplikasi yang menggunakan DOM secara berlebihan bukanlah pantas)

• SVG mempunyai kerumitan yang tinggi disebabkan oleh operasi DOM yang tinggi akan memperlahankan kelajuan pemaparan dan tidak sesuai untuk aplikasi permainan

• Sesuai untuk kawasan yang besar. adegan nombor kecil. Adalah sangat disyorkan untuk memberi keutamaan kepada SVG untuk pemaparan pada platform mudah alih.

• Pengesyoran berkaitan: "
tutorial video html

"

Atas ialah kandungan terperinci Apakah kaedah lukisan dalam html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!