在HTML5中常用的兩種繪圖元素分別是什么？

親愛的提問朋友，html5中常用的兩種繪圖元素是：Canvas和SVG。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、五蓮網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為五蓮等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

他們都是html5中支持在畫布上繪制圖形和放入圖片的。

Canvas 是H5新出來(lái)的標(biāo)簽canvas/canvas

Canvas畫布，利用JavaScript在網(wǎng)頁(yè)繪制圖像

在標(biāo)簽中給上寬高：canvas width="800" height="800"/canvas?

SVG 可縮放矢量圖形（Scalable Vector Graphics），基于可擴(kuò)展標(biāo)記語(yǔ)言XML? 出來(lái)的時(shí)間比較老

SVG 用來(lái)定義用于網(wǎng)格的基于矢量的圖形。

HTML5畫布和SVG的不同

canvas 與 SVG都能夠使你在瀏覽器中畫圖，但它們的基本原理不同。

SVG?

SVG是一種在XML中描述二維圖形的語(yǔ)言。?

SVG是基于XML的，意味著在SVG DOM內(nèi)每一個(gè)元素都是可用的。你可以為每一個(gè)元素增加JS事件處理器。?

在SVG中，每一個(gè)圖形被記作一個(gè)對(duì)象。如果一個(gè)SVG對(duì)象的屬性發(fā)生改變，瀏覽器可以自動(dòng)重新生成圖形。

Canvas?

Canvas能夠在fly上畫2D圖形（使用JS）?

Canvas能夠按照像素重新生成。?

在Canvas中，一旦圖形完成，就會(huì)被瀏覽器忘記。如果圖形位置要發(fā)生改變，那么整個(gè)屏幕需要重畫，包括圖形覆蓋的對(duì)象。

html5 svg和canva的區(qū)別

SVG

SVG 是一種使用 XML 描述 2D 圖形的語(yǔ)言。

SVG 基于 XML，這意味著 SVG DOM 中的每個(gè)元素都是可用的。您可以為某個(gè)元素附加 JavaScript 事件處理器。

在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象。如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。

Canvas

Canvas 通過 JavaScript 來(lái)繪制 2D 圖形。

Canvas 是逐像素進(jìn)行渲染的。

在 canvas 中，一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制，包括任何或許已被圖形覆蓋的對(duì)象。

Canvas 與 SVG 的比較

下表列出了 canvas 與 SVG 之間的一些不同之處。

Canvas

依賴分辨率

不支持事件處理器

弱的文本渲染能力

能夠以 .png 或 .jpg 格式保存結(jié)果圖像

最適合圖像密集型的游戲，其中的許多對(duì)象會(huì)被頻繁重繪

SVG

不依賴分辨率

支持事件處理器

最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）

復(fù)雜度高會(huì)減慢渲染速度（任何過度使用 DOM 的應(yīng)用都不快）

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

如何在HTML中顯示SVG？

SVG 即 Scalable Vector Graphics，是一種用來(lái)繪制矢量圖的 HTML5 標(biāo)簽。你只需定義好XML屬性，就能獲得一致的圖像元素。

使用SVG之前先將標(biāo)簽加入到HTML body中。就像其他的HTML標(biāo)簽一樣，可以為SVG標(biāo)簽為之添加ID屬性。也可以為之添加css樣式，例如“border-style:solid;border-width:2px;”。SVG標(biāo)簽跟其它的HTML標(biāo)簽有通用的屬性。將SVG元素加入到HTML代碼中，SVG提供很多繪圖形狀，例如線條、圓、多邊形等。

SVG線條：

SVG線條用標(biāo)簽定義，在此標(biāo)簽內(nèi)你還可以定義其他的屬性。

該標(biāo)簽包括像起點(diǎn)坐標(biāo)(x1,y1)和終點(diǎn)坐標(biāo)(x2,y2)這樣的屬性。指定x1,y1,x2,y2值來(lái)設(shè)定起點(diǎn)終點(diǎn)坐標(biāo)。在指定好坐標(biāo)后，可以為之添加一些樣式，在style屬性中使用“stroke:Green;”為線條指定顏色。同樣也可以用stroke-width:2為線條設(shè)置寬度。

代碼1：使用SVG畫線

HTML5 SVG Line Example

!----

SVG畫圓：

SVG提供了一種不同的標(biāo)簽來(lái)畫圓。正如你看到的下面代碼，circle有個(gè)id為myCircle。為了定義圓的中心以及半徑，使用cx="55" cy="55"以及r="50"屬性分別定義。使用fill="#219E3E"為圓填充顏色。同樣你可以用stroke="#17301D" stroke-width="2"定義圓周線條顏色和寬度。

代碼2:使用SVG畫圓

HTML5 SVG Circle Example

SVG矩形:

同樣的使用標(biāo)簽來(lái)畫矩形，我們同樣設(shè)置了 id 屬性 “myRectangle” ,用 width="300" height="100" 定義高寬，使用 fills 屬性定義填充顏色。用 strock 定義邊框。還有一點(diǎn)需要注意，我用 fill-opacity="0.5" stroke-opacity="0.5" 為 stroke 和 filling 都添加了透明度。

代碼3:SVG畫矩形

HTML5 SVG Rectangle Example

SVG橢圓：

同樣是用標(biāo)簽來(lái)繪制橢圓。設(shè)置其 id="myEllipse" ，給定起中心坐標(biāo) cx="120"cy="60"，長(zhǎng)軸短軸半徑 rx="100" ry="50",并用設(shè)置填充顏色、邊框?qū)挾纫约斑吙蝾伾玸tyle="fill:#3F5208;stroke:black;stroke-width:3"。

代碼4:SVG畫橢圓

HTML5 SVG Ellipse Example

SVG多邊形：

使用特定標(biāo)簽繪制多邊形,points屬性用來(lái)定義多邊形的幾個(gè)頂點(diǎn)，用左邊對(duì)來(lái)定義，形如 points="10,10 75,150 150,60" ，這里定義了三個(gè)頂點(diǎn)(10,10),(75,150),(150,60)。同上面一樣，用 style="fill:#63BCF7;stroke:black;stroke-width:3" 定義多邊形填充顏色、邊框以及邊框?qū)挾取?/p>

代碼5：SVG畫多邊形

HTML5 SVG Polygon Example

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

SVG SVG 是一種使用 XML 描述 2D 圖形的語(yǔ)言。 SVG 基于 XML，這意味著 SVG DOM 中的每個(gè)元素都是可用的。您可以為某個(gè)元素附加 JavaScript 事件處理器。 在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象。如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。 Canvas Canvas 通過 JavaScript 來(lái)繪制 2D 圖形。 Canvas 是逐像素進(jìn)行渲染的。 在 canvas 中，一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制，包括任何或許已被圖形覆蓋的對(duì)象。 Canvas 與 SVG 的比較 下表列出了 canvas 與 SVG 之間的一些不同之處。 Canvas 依賴分辨率 不支持事件處理器 弱的文本渲染能力 能夠以 .png 或 .jpg 格式保存結(jié)果圖像 最適合圖像密集型的游戲，其中的許多對(duì)象會(huì)被頻繁重繪 SVG 不依賴分辨率 支持事件處理器 最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖） 復(fù)雜度高會(huì)減慢渲染速度（任何過度使用 DOM 的應(yīng)用都不快） 不適合游戲應(yīng)用

如何在HTML5中使用SVG

svg跟html標(biāo)簽一樣使用就可以了，divsvgpath/path/svg/div

文章名稱：html5與svg,用html5
網(wǎng)頁(yè)URL：http://chinadenli.net/article10/dsgscgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、自適應(yīng)網(wǎng)站、企業(yè)建站、定制開發(fā)、用戶體驗(yàn)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)