SVG與HTML5的canvas各有什么優(yōu)點，哪個更有前途？SVG通常用于繪制圖標和圓形框架。畫布是兩種不同類型的繪畫。在靜態(tài)繪圖、圖標尺測量繪圖等方面都無法與SVG相比。Canvas可以繪制三維粒子

SVG與HTML5的canvas各有什么優(yōu)點，哪個更有前途？

SVG通常用于繪制圖標和圓形框架。畫布是兩種不同類型的繪畫。在靜態(tài)繪圖、圖標尺測量繪圖等方面都無法與SVG相比。Canvas可以繪制三維粒子動畫游戲。如果它真的想和Canvas相比，它更好，因為SVG的東西可以做。如果SVG的東西將來做不到，最好還是學SVG。當然不難學，帆布更有前途。畢竟，canvas相當于一個系統(tǒng)

SVG是一個矢量圖，而canvas不是。然而，SVG使用HTML語法來描述圖形。他們都使用javscript來繪制和操作圖形。如果在實際應用中圖形變化頻繁，對圖形清晰度的要求不是很高，可以考慮使用畫布，比如網頁上的小游戲或者一些很酷的特效。另外SVG也很好，圖像質量也很高很好，比如各種統(tǒng)計圖形、矢量圖標、字體圖標等等！而且他們都有一個很好的類庫可以使用，或者更好

SVG與HTML5的canvas各有什么優(yōu)點，哪個更有前途？

區(qū)別一：SVG繪制的每個圖形的元素都是獨立的DOM節(jié)點，可以很容易地綁定到事件或用于修改。畫布輸出是一個完整的畫布；區(qū)別二：SVG輸出的圖形是矢量圖形，以后可以修改參數自由縮放，不真實和鋸齒。canvas輸出標量canvas，就像一個圖像，放大后會失真或鋸齒狀。

HTML中SVG和CANVAS的區(qū)別？

隨著技術的更新和迭代，前端工作越來越繁重和復雜。

CSS技術就像一個數學問題。它有太多的可變性。這就是困難所在。例如，您可以清楚地看到11=2，但是您是否需要考慮1 1000-10 1100 123的問題？

隨著CSS3的出現，CSS不再簡單，CSS3動畫、變形、漸變、過濾器等

布局有彈性、網格等。就像數學問題一樣，任何組合都是一種新類型的問題，變得極其復雜。所以學好基礎知識更重要，要有各種知識，扎實的基礎知識，看問題類型，有自己的想法，有多種解決方法，不受限制。CSS有復雜和困難的樣式，我們可以使用多種解決方案，比如canvas、SVG、真不圖像等等。

CSS為什么這么難學？

在動畫中：畫布的動畫是逐幀渲染的，因為每次渲染實際上都是靜態(tài)的，動態(tài)效果是通過連續(xù)計算和重新渲染來實現的。通常，我們使用請求動畫幀來優(yōu)化渲染頻率。對于不支持的瀏覽器，我們可以調用setTimeout進行計算，每隔一段時間重新渲染一次，一般會將幀速率控制在最小60幀/1秒，以達到平滑效果，但可能是由于計算量大，或者機器性能差，導致阻塞、動畫掉幀，在這方面，您可以在計算中優(yōu)化算法，也可以把計算交給web工作者來處理，以達到不阻塞頁面主進程的目的；SVG實際上不同于我們傳統(tǒng)的dom動畫。它支持CSS中的變換、變換等實現動畫。通過JS獲取SVG節(jié)點，改變樣式屬性，實現動畫效果。一般來說，實現動畫與傳統(tǒng)的DOM是一致的。

至于選擇，其實各有所長。它還取決于實際的使用場景。例如，如果需要實現一個小游戲，那么canvas更合適。如果您想實現一些數據圖表的繪制，您仍然喜歡SVG。

當然，在動畫方面，也有webgl等選項，在優(yōu)化和功能上都比較先進，比如3D、VR等。