欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5之SVG 2D入門13—svg對(duì)決canvas及長(zhǎng)處和適用場(chǎng)景分析

  發(fā)布時(shí)間：2013-01-30 17:07:18   作者：佚名   我要評(píng)論
到目前為止，SVG與Canvas的主要特性均已經(jīng)總結(jié)完畢了,現(xiàn)在，我們就來比對(duì)一下這兩種技術(shù)，分析一下它們的長(zhǎng)處和適用場(chǎng)景,感興趣的朋友可以了解下哦，或許對(duì)你有所幫助

到目前為止，SVG與Canvas的主要特性均已經(jīng)總結(jié)完畢了。它們都是HTML5中支持的2D圖形展示技術(shù)，而且均支持向量圖形?，F(xiàn)在，我們就來比對(duì)一下這兩種技術(shù)，分析一下它們的長(zhǎng)處和適用場(chǎng)景。
首先分析一下兩種技術(shù)的顯著特點(diǎn)，看下面的表格： 

Canvas SVG
基于像素（動(dòng)態(tài) .png） 基于形狀
單個(gè) HTML 元素 多個(gè)圖形元素，這些元素成為 DOM 的一部分
僅通過腳本修改 通過腳本和 CSS 修改
事件模型/用戶交互顆?；?(x,y) 事件模型/用戶交互抽象化 (rect, path)
圖面較小時(shí)、對(duì)象數(shù)量較大 (>10k)（或同時(shí)滿足這二者）時(shí)性能更佳 對(duì)象數(shù)量較小 (<10k)、圖面更大（或同時(shí)滿足這二者）時(shí)性能更佳

從上面的對(duì)比中可以看出：Canvas在像素操作方面有著強(qiáng)大的優(yōu)勢(shì)；而SVG的最大優(yōu)勢(shì)在于便捷的交互性和可操作性。使用Canvas受畫布的尺寸(其實(shí)就是像素?cái)?shù)目)影響很大，使用SVG受對(duì)象的數(shù)目(元素的數(shù)目)影響比較大。Canvas 和 SVG 在修改方式上還存在著不同。繪制 Canvas 對(duì)象后，不能使用腳本和 CSS 對(duì)它進(jìn)行修改。而 SVG 對(duì)象是文檔對(duì)象模型的一部分，所以可以隨時(shí)使用腳本和 CSS 修改它們。
實(shí)際上Canvas 是基于像素的即時(shí)模式圖形系統(tǒng)，繪制完對(duì)象后不保存對(duì)象到內(nèi)存中，當(dāng)再次需要這個(gè)對(duì)象時(shí)想，需要重新繪制；SVG 是基于形狀的保留模式圖形系統(tǒng)，繪制完對(duì)象后會(huì)將其保存在內(nèi)存中，當(dāng)需要修改這個(gè)對(duì)象信息時(shí)，直接修改就可以了。這種根本的區(qū)別導(dǎo)致了很多應(yīng)用場(chǎng)景的不同。

在下面的幾個(gè)常見應(yīng)用中，我們也可以體會(huì)到這一點(diǎn)。
高保真的文檔
這個(gè)方面很好理解，為了瀏覽文檔時(shí)，縮放時(shí)不失真，或需要打印高質(zhì)量的文檔，通常會(huì)優(yōu)先選擇SVG，例如地圖服務(wù)。
靜態(tài)的圖片資源
SVG常常用于簡(jiǎn)單圖像，無論是應(yīng)用程序還是網(wǎng)頁(yè)中的圖像，大圖像還是小圖像。由于SVG要加載到DOM中，或者創(chuàng)建圖像前至少要進(jìn)行解析，所以性能會(huì)稍微有所下降，但相比于呈現(xiàn)網(wǎng)頁(yè)的成本（大約幾毫秒），這種效率損失是極其微小。
在文件大小方面（為了評(píng)估網(wǎng)絡(luò)流量的目的），SVG圖片與png圖片大小相差也不大。但是因?yàn)镾VG作為圖像格式是可縮放的，所以如果開發(fā)人員想要以更大的比例使用該圖像，或者用戶使用高 DPI的屏幕，則使用SVG是相當(dāng)不錯(cuò)的選擇。

像素操作
使用Canvas時(shí)可以獲得快速的繪圖速度，且不需要保留元素的相應(yīng)信息。特別是當(dāng)需要處理像素操作時(shí)，性能較好。這種類型的應(yīng)用基本都選擇Canvas技術(shù)。
實(shí)時(shí)數(shù)據(jù)
Canvas非常適合非交互的實(shí)時(shí)數(shù)據(jù)可視化。比如實(shí)時(shí)天氣數(shù)據(jù)。
圖表和圖形
使用SVG或者Canvas均可以繪制相關(guān)圖形和圖表，但是如果要強(qiáng)調(diào)可操作性，則SVG無疑是最好選擇，如果不需要交互性，強(qiáng)調(diào)性能，則Canvas比較適合。
二維游戲
因?yàn)橛螒虼蠖鄶?shù)是使用低級(jí)的API開發(fā)，所以Canvas比較容易讓人接受。但是實(shí)際上，繪制游戲的場(chǎng)景的時(shí)候，Canvas需要重復(fù)繪制和定位形狀，而SVG是維護(hù)在內(nèi)存中，修改相關(guān)的屬性非常容易，所以SVG也是一種不錯(cuò)的選擇。
在小游戲板上使用幾個(gè)對(duì)象創(chuàng)建游戲時(shí)，Canvas 和 SVG 之間在性能上幾乎沒有差異。但是，隨著創(chuàng)建更多的對(duì)象，Canvas 代碼將會(huì)增大許多。由于每次進(jìn)行游戲循環(huán)時(shí)都必須重新繪制 Canvas 對(duì)象，因此 Canvas 游戲的速度會(huì)減慢。
用戶界面設(shè)計(jì)
由于良好的交互性，無疑SVG更勝一籌。利用 SVG 的保留模式圖形顯示，你可以在正文的類似 HTML 的標(biāo)記中創(chuàng)建所有用戶界面詳細(xì)信息。因?yàn)槊總€(gè) SVG 元素和子元素都可以響應(yīng)單獨(dú)的事件，所以你可以非常輕松地創(chuàng)建復(fù)雜的用戶界面。而 Canvas 需要你按照更復(fù)雜的代碼順序來指定如何創(chuàng)建用戶界面的每個(gè)部分。你需要遵照的順序是：
•獲取上下文。
•開始繪制。
•指定每根線條和每個(gè)填充的顏色。
•定義形狀。
•完成繪制。
此外，Canvas 只能處理整個(gè)畫布的事件。如果有更復(fù)雜的用戶界面，則必須確定在畫布上單擊的位置的坐標(biāo)。SVG 可以單獨(dú)處理每個(gè)子元素的事件。

下面兩個(gè)例子分別說明了canvas與svg各自的技術(shù)優(yōu)勢(shì)：

canvas的典型應(yīng)用如綠屏：http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasgreenscreen.htm

效果圖如下：

打開頁(yè)面以后可以查看頁(yè)面源代碼。

這個(gè)應(yīng)用是從兩個(gè)視頻中讀寫像素到另一個(gè)視頻中，代碼使用兩個(gè)視頻、兩個(gè)畫布和一個(gè)最終畫布。一次捕捉視頻上的一幀，然后繪制到兩個(gè)單獨(dú)的畫布上，這樣允許讀回?cái)?shù)據(jù)：

復(fù)制代碼
代碼如下:

ctxSource1.drawImage(video1, 0, 0, videoWidth, videoHeight);
ctxSource2.drawImage(video2, 0, 0, videoWidth, videoHeight);

因此，下一步是檢索每個(gè)繪制圖像的數(shù)據(jù)，以便可以檢查每個(gè)單獨(dú)的像素：

復(fù)制代碼
代碼如下:

currentFrameSource1 = ctxSource1.getImageData(0, 0, videoWidth, videoHeight);
currentFrameSource2 = ctxSource2.getImageData(0, 0, videoWidth, videoHeight);

獲取后，代碼將瀏覽綠屏的像素?cái)?shù)組，搜索綠色像素，如果找到，代碼將用背景場(chǎng)景中的像素替換所有綠色像素。：

復(fù)制代碼
代碼如下:

for (var i = 0; i < n; i++)
{
// Grab the RBG for each pixel:
r = currentFrameSource1.data[i * 4 + 0];
g = currentFrameSource1.data[i * 4 + 1];
b = currentFrameSource1.data[i * 4 + 2];

// If this seems like a green pixel replace it:
if ( (r >= 0 && r <= 59) && (g >= 74 && g <= 144) && (b >= 0 && b <= 56) ) // Target green is (24, 109, 21), so look around those values.
{
pixelIndex = i * 4;
currentFrameSource1.data[pixelIndex] = currentFrameSource2.data[pixelIndex];
currentFrameSource1.data[pixelIndex + 1] = currentFrameSource2.data[pixelIndex + 1];
currentFrameSource1.data[pixelIndex + 2] = currentFrameSource2.data[pixelIndex + 2];
currentFrameSource1.data[pixelIndex + 3] = currentFrameSource2.data[pixelIndex + 3];
}
}

最后，像素?cái)?shù)組將寫入到目標(biāo)畫布中：

復(fù)制代碼
代碼如下:

ctxDest.putImageData(currentFrameSource1, 0, 0);

svg典型的應(yīng)用如用戶界面：

復(fù)制代碼
代碼如下:

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript">
// This function is called when the circle is clicked.
function clickMe() {
// Display the alert.
alert("You clicked the SVG UI element.");
}
</script>
</head>
<body>
<h1>
SVG User Interface
</h1>
<!-- Create the SVG pane. -->
<svg height="200" width="200">
<!-- Create the circle. -->
<circle cx="100" cy="100" r="50" fill="gold" id="uIElement" onclick="clickMe();"
/>
</svg>
<p>
Click on the gold circular user interface element.
</p>
</body>
</html>

這個(gè)例子雖然簡(jiǎn)單，但是具備了用戶界面的一切特性，從這個(gè)例子中我們?cè)俅晤I(lǐng)略了svg便捷的交互性。

最后用一幅圖來總結(jié)一下每種應(yīng)用適合的技術(shù)，圖中每個(gè)方塊代表一類應(yīng)用，越靠近某一端，說明采用該技術(shù)越具有的優(yōu)勢(shì)：

 

實(shí)用參考：
腳本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
開發(fā)中心：https://developer.mozilla.org/en/SVG
熱門參考：http://www.chinasvg.com/
官方文檔：http://www.w3.org/TR/SVG11/

相關(guān)文章

  • 詳解FireFox下Canvas使用圖像合成繪制SVG的Bug

    這篇文章主要介紹了詳解FireFox下Canvas使用圖像合成繪制SVG的Bug，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-07-10

  • html5中svg canvas和圖片之間相互轉(zhuǎn)化思路代碼

    需要把網(wǎng)頁(yè)部分內(nèi)容做正文，并把原網(wǎng)頁(yè)轉(zhuǎn)成pdf作為附件，發(fā)送郵件給boss，將svg轉(zhuǎn)成canvas顯示，但是后來發(fā)現(xiàn)canvas也無法正常顯示，最后不得已，只能將canvas標(biāo)簽再一次轉(zhuǎn)
    2014-01-24

  • HTML5中Canvas與SVG的畫圖原理比較

    canvas 與 SVG都能夠使你在瀏覽器中畫圖，但它們的基本原理不同,接下來將對(duì)canvas 與 SVG的畫圖原理進(jìn)行介紹，感興趣的朋友可以了解下
    2013-01-16

  • Canvas和SVG的區(qū)別小結(jié)

    Canvas和SVG都是HTML5中的圖形渲染技術(shù)，那么你知道這兩種有哪些區(qū)別嗎，本文就詳細(xì)的介紹一下，感興趣的可以了解一下
    2023-05-11

最新評(píng)論