Perbandingan prinsip lukisan antara Kanvas dan SVG dalam kemahiran tutorial HTML5_html5

Kedua-dua kanvas dan SVG membolehkan anda melukis gambar dalam penyemak imbas, tetapi prinsip asasnya berbeza.
SVG
SVG ialah bahasa untuk menerangkan grafik dua dimensi dalam XML.
SVG adalah berdasarkan XML, yang bermaksud setiap elemen tersedia dalam SVG DOM. Anda boleh menambah pengendali acara JS untuk setiap elemen.
Dalam SVG, setiap grafik direkodkan sebagai objek. Jika sifat objek SVG berubah, penyemak imbas boleh menjana semula grafik secara automatik.

Kanvas
Kanvas boleh melukis grafik 2D dengan cepat (menggunakan JS)
Kanvas boleh dijana semula mengikut piksel.

Dalam Kanvas, setelah grafik selesai, ia dilupakan oleh penyemak imbas. Jika kedudukan grafik ingin ditukar, keseluruhan skrin perlu dilukis semula, termasuk objek yang diliputi oleh grafik.

Perbandingan antara Kanvas dan SVG
Jadual berikut menunjukkan perbezaan utama antara kanvas dan SVG:

Canvas	SVG
依赖分辨率	独立于分辨率
不支持事件处理器	支持事件处理器
弱文本渲染能力	最适合具有大渲染面积的应用（谷歌地图）
可以保存最终图片为PNG或者JPG	复杂图像，重画变慢（任何使用DOM很多的情况都会变慢）
最适合许多 对象频繁重画的图形游戏	不适合游戏应用