HTML中SVG和CANVAS的區(qū)別？區(qū)別一：SVG繪制的每個(gè)圖形的元素都是獨(dú)立的DOM節(jié)點(diǎn)，可以很容易地綁定到事件或用于修改。畫(huà)布輸出是一個(gè)完整的畫(huà)布；區(qū)別二：SVG輸出的圖形是矢量圖形，以后可以修

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

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

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

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

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

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

隨著技術(shù)的更新和迭代，前端工作變得越來(lái)越繁重和復(fù)雜。

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

隨著CSS3的出現(xiàn)，CSS不再簡(jiǎn)單，CSS3動(dòng)畫(huà)、變形、漸變、過(guò)濾器等

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

CSS為什么這么難學(xué)？

canvas和SVG都允許在瀏覽器中創(chuàng)建圖形，但它們有本質(zhì)的不同。

Canvas

說(shuō)明：

使用JavaScript繪制2D圖形。

逐像素渲染。

其位置發(fā)生變化并重新繪制。

Svg

Description:

由XML描述的二維圖形語(yǔ)言

Svg基于XML，這意味著Svg DOM中的每個(gè)元素都可用，并且可以將JavaScript事件處理程序附加到元素。

在SVG中，每個(gè)圖形都被視為一個(gè)對(duì)象。如果SVG對(duì)象的屬性發(fā)生變化，瀏覽器可以自動(dòng)再現(xiàn)圖形。

比較

畫(huà)布

分辨率相關(guān)

不支持事件處理程序

文本呈現(xiàn)能力弱

在中呈現(xiàn)的能力。PNG或。Jpg格式保存結(jié)果圖像

最適合圖像密集型游戲，其中許多對(duì)象經(jīng)常被重繪

SVG

分辨率無(wú)關(guān)

事件處理器支持

最適合渲染面積大的應(yīng)用程序（如谷歌地圖）

高復(fù)雜度會(huì)降低渲染速度（任何過(guò)度使用DOM不快）

不適合游戲應(yīng)用

HTML5推薦以下書(shū)籍。

《HTML5權(quán)威指南》這本書(shū)是為初學(xué)者和中級(jí)Web開(kāi)發(fā)人員準(zhǔn)備的，是扎實(shí)掌握HTML5、CSS3和JavaScript的必讀書(shū)籍。這本書(shū)看起來(lái)很厚，因?yàn)樗泻芏啻a。

“HTML5畫(huà)布核心技術(shù)”如果你想做HTML5游戲，這本書(shū)一定要讀。

對(duì)于SVG、canvas和webgl，矢量圖形、位圖和3D圖形對(duì)應(yīng)的三種渲染方式，給前端開(kāi)發(fā)帶來(lái)了沉重的武器，很多HTML5游戲也蓬勃發(fā)展。