討論關於canvas和svg的區別。首先canvas是html5提供的新元素<canvas>，而svg存在的歷史要比canvas久遠，已經有十幾年了。svg並不是html5專有的標籤，最初svg是用xml技術（超文字擴充套件語言，可以自定義標籤或屬性）描述二維圖形的語言。在H5中看似canvas與svg很像，但是，他們有巨大的差別。

  首先，從它們的功能上來講，canvas可以看做是一個畫布。，其繪製出來的圖形為標量圖，因此，可以在canvas中引入jpg或png這類格式的圖片，在實際開發中，大型的網路遊戲都是用canvas畫布做出來的，並且canvas的技術現在已經相當的成熟。另外，我們喜歡用canvas來做一些統計用的圖表，如柱狀圖曲線圖或餅狀圖等。而svg，所繪製的圖形為向量圖，所以其用法上受到了限制。因為只能繪製向量圖，所以svg中不能引入普通的圖片，因為向量圖的不會失真的效果，在專案中我們會用來做一些動態的小圖示。但是由於其本質為向量圖，可以被無限放大而不會失真，這很適合被用來做地圖，而百度地圖就是用svg技術做出來的。

  另外從技術發麵來講canvas裡面繪製的圖形不能被引擎抓取，如我們要讓canvas裡面的一個圖片跟隨滑鼠事件：canvas.onmouseover=function(){}。而svg裡面的圖形可以被引擎抓取，支援事件的繫結。另外canvas中我們繪製圖形通常是通過javascript來實現，svg更多的是通過標籤來來實現，如在svg中繪製正矩形形就要用<rect>，這裡我們不能用屬性style="width:XXX;height:XXX;"來定義。我再來介紹一個svg的js庫：TWO.JS。其中包含two.js和three.js前者用於繪製二維圖形，後者用於繪製三維圖形。TWO.JS可以支援三種格式，svg（預設）、canvas、和WEBGL。當然也可以在普通div中引入。
--------------------- 
作者：helloword_chen 
來源：CSDN 
原文：https://blog.csdn.net/helloword_chen/article/details/49788309?utm_source=copy 
版權宣告：本文為博主原創文章，轉載請附上博文連結！