當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

如何在 SVG 和 Canvas 之间进行选择

發布時間：2023/12/14 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了如何在 SVG 和 Canvas 之间进行选择小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

本主題一開始將對 SVG 與 Canvas 進行簡要比較，接下來會討論大量的比較代碼示例，如光線跟蹤和綠屏。

注意??為了查看本主題中包含的很多示例，你必須使用支持?SVG?和?Canvas?元素的瀏覽器（如 Windows Internet Explorer?9）。

簡介
向量圖形
- 向量圖形方案的簡要概述
- 專業設計器和使用工具
HTML5 圖形技術
- 技術簡介
何時使用 <canvas>、何時使用 SVG：方案
- 從性能方面選擇
- 高保真度的復雜向量文檔
- 增強的 Web 圖形
- 像素操作
- 實時數據
- 像素替換（綠屏）
- 組合/交叉方案
高級方案
- 用戶界面設計
結論
相關主題

簡介

HTML 不斷演變以提供更好、更豐富的標準圖形來幫助改進客戶體驗。為 Web 開發人員創造了使用基于標準的 Web 技術創建圖形豐富的交互網站和應用程序的機會，而無需使用專用的技術或編寫瀏覽器特定的代碼。以下各節介紹了向量圖形的概念并執行相應操作：

區分即時模式和保留模式之間的差異
介紹用于即時模式圖形的 HTML5 Canvas 元素并提供對 Canvas 的概述
介紹可縮放向量圖形 (SVG)、一組用于保留模式圖形的 HTML5 元素并提供對 SVG 的概述
指導新開發人員和有經驗的開發人員對向量圖形和 HTML5 使用其中一個向量圖形模型（或同時使用兩者，具體取決于方案）

向量圖形

向量圖形不是新概念。它們是全部基于向量來表示圖像的幾何基元（形狀、點、線條和多邊形）。在 1960 年代后期，向 Logo 編程語言添加了向量圖形語言（海龜繪圖）來支持用于執行繪圖功能的海龜機器人。雖然圖形世界在復雜性方面已經發生了重大的演變，但是存在的基本概念是相同的。

向量圖形的復雜性范圍從簡單到適中再到相當復雜。下面是一些基本示例。

簡單 - 一個文檔或插圖中的標注。
適中 - 圖表、關系圖和地圖等插圖。
復雜 - 類似那些用于工程的文檔。

盡管前面的示例在性質上是靜態的，但是向量圖形也支持交互性，這是一項可顯著擴展方案的關鍵功能。向量圖形為 Web、桌面和設備上的應用程序提供交互和靜態的格式。

向量圖形方案的簡要概述

在當今 Web 上

在網頁中使用向量圖形作為背景圖像以支持高 DPI 和“收縮”縮放功能。
地圖屬性（如?Bing 地圖）用來執行線路查找操作。
顯示實時的圖表和圖形的交互式股票網站。
選擇和其他地圖。
航班或音樂廳的座位圖。
游戲。

在辦公室中

Microsoft Office Word（用于剪貼畫）、PowerPoint 和 Excel 以及 Visio 形狀等高效工具。
輸出向量圖形格式的 CAD 工具。
呈現交互圖表和圖形的 Oracle 和 Microsoft Dynamics 應用程序等企業工具。

在設備上

使得圖形用戶界面更加豐富。
用戶交互小工具和圖標。
完整 PDA 用戶體驗。

專業設計器和使用工具

專業的 Web 設計人員在如下工具集中查看向量圖形：

用于創建高質量靜態圖像（可以導出為 SVG）的 Adobe Illustrator
可以導出為基于 XML 的向量語言的 Adobe?Flash Professional
用于 Windows Presentation Foundation (WPF) 和 Silverlight 的 Microsoft Expression?Blend

請務必注意，向量圖形已經在桌面、設備和 Web 上存在很長時間了。

HTML5 圖形技術

借助 HTML5，開發人員或設計人員現在可以使用基于標準的技術來創建以前的體驗。這樣可消除對插件的安裝（50% 的網站放棄訪問均與插件的安裝相關），從而可以極大地改善用戶體驗。目前，圖形由瀏覽器原生提供，而對于 Internet Explorer?9，則利用 Microsoft Windows 和硬件加速圖形的功能。

下一節概述了兩種全新但不同的技術、這兩種技術的使用方法以及各自的優勢和限制。使用一個向量圖形方案譜表來討論用于為每個方案選擇最佳技術的方法。

下圖顯示了存在于向量圖形中的一個常規方案譜表。每一個方案都可能會更接近于 canvas 或 svg，這意味著一種技術相對于其他技術更適合該方案。如果方案位于譜表中間，那么選擇任一技術都是可行的

幾乎所有向量圖形都可以使用上述任一種技術來繪制，但有時根據任務的不同，會有非常多的工作要由開發人員或計算機完成。當我們檢查每種技術的用例，然后將其應用于常見方案時，我們會進一步了解此譜表。

技術簡介

下一節介紹了用于在 HTML5 中創建向量圖形的技術，從而建立對早期存在的方案的討論。

使用示例

若要使用以下示例，請將以下代碼示例用作模板?？梢允褂么四０鍋黹_發 SVG 而非 HTML。此模板在本主題的每個示例中使用。由于格式原因，你可以使用腳本以及樣式。此模板還包含一個 Meta 標記，這使得可以在本地文件共享上更輕松地進行 SVG 開發。這些示例使用下面的格式。首先提供有意義的代碼，然后鏈接到完整代碼。

HTML <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <style type="text/css" media="screen"> </style> <script type="text/javascript"> </script> </head> <body> </body> </html>

http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/template.htm?（單擊“查看源文件”即可查看此標記）。

SVG

SVG 用于描述可縮放向量圖形，這是一個保留在內存中模型中的保留模式圖形模型，而內存中模型可通過重新呈現的代碼結果進行操作。這不同于即時模式，該模式將稍后討論。在 HTML5 中同時提供這兩種模式。

SVG 是一個保留模式模型，作為對獨立供應商（Microsoft 和 Adobe）所提出的兩個建議的回應，在 1999 年引入。成立了 W3C SVG 工作組，并且在 2001 年 SVG 規范達到了“建議的狀態”。目前，我們按照?SVG 1.1 第 2 版工作，該版本在編寫本文時處于“最后征求意見”階段。

盡管 SVG 可以作為獨立文件進行提供，但是最初著重于將它與 HTML 自然集成。

類似于 HTML，SVG 也是使用元素、屬性、和樣式來構建文檔。首次將 <svg> 元素引入到文檔中時，該元素的行為非常類似于 <div> 且作為 HTMLDocument 的一部分，但它包含附加接口 SVGDocument（SVGDocument 提供與向量圖形的更深入、更豐富的交互）。

元素

盡管外部?<svg>?包裝適合于 HTML 框模型，但是大多數情況下，內部模型都會從該包裝中分離出來，因為向量不局限于簡單的框。這種分離要求擴展 SVG 中的屬性才能提供豐富的圖形。

例如：

HTML <svg height="1000px" width="1000px"> <rect id="myRect" height="100px" width="100px" fill="blue"/> </svg>

http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/bluerect.htm

注意??為了呈現此內容以及以下很多示例，你必須使用支持?SVG?和?Canvas?元素的瀏覽器（如 Internet Explorer?9）。

之前的 HTML 代碼將創建一個正方形，長寬均為 100 像素，并使用藍色背景進行填充。

此?<rect>?元素保留在 HTML 文檔的文檔對象模型 (DOM) 中。就像其他 HTML 元素一樣，可通過多種不同的方式設置 SVG 的樣式。下面的示例是一個表。

樣式設置

開發人員可能會注意到屬性是類似的。SVG 同時具有屬性和演示屬性。此處看起來描述有點隨意，但關鍵在于可以按照 CSS 樣式規則設置演示屬性的樣式。

四個矩形使用幾種不同的方法進行填充。

HTML  <rect id="myRect1" height="100%" width="100%" >  <rect id="myRect2" height="100%" width="100%" class="greenrect"/>  <rect id="myRect3" height="100%" width="100%" style="fill:pink"/>  <rect id="myRect4" height="100%" width="100%" fill="red"/>

第一個示例演示省去一個屬性會在圖形上產生可視效果。在此示例中，顏色默認為黑色。

第二個示例演示使用?class="greenrect"?來填充矩形。包含的用于填充此矩形的 CSS 的形式為：

CSS rect.greenrect {fill:green;}

第三個示例使用內聯樣式將填充設置為粉色。最后一個示例使用相應屬性填充紅色。此示例還演示了 CSS 選擇器的用法。樣式還包括：

CSS rect:hover {fill:yellow;}

這針對所有矩形建立一個規則，即鼠標懸停在這些矩形之上時顏色更改為黃色。

這些對于有經驗的 Web 開發人員來說應該都不是新內容了。此處提供這些示例是為了強調相似性（使用樣式、樣式表、類和選擇器）以及差異（樣式不適用于所有屬性，僅適用于演示屬性、新屬性或不一致的屬性）。

http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/svgstyling.htm

可編程性

屬性 API 及其他 DOM 操作仍應用并遵循當前的屬性規則。例外情況是，演示應用程序基于樣式所取代的屬性（如果適用）。

如果這些屬性是通過核心屬性或通過其各自的 DOM 方法進行設置的，則將影響這些屬性的演示，并且基礎 DOM 將相應地發生更改（注意使用 SVG DOM 設置高度的不同語法）：

HTML document.getElementById("myDiv").style.height = "200px"; // alternatively //document.getElementById("myDiv").style="height;200px";document.getElementById("myRect").height.baseVal.value = 200; // alternatively //document.getElementById("myRect").setAttribute("height","200px");

交互

SVG 的另一個關鍵區分因素是能夠進行代碼交互且不復雜。正如 SVG 具有一個類似 HTML 的可編程 DOM 一樣，它還具有事件模型。檢查下面比矩形或正方形更復雜的圖形：路徑。

使用路徑可繪制任意形狀，例如在該示例中為表示美國的阿拉斯加州和夏威夷州的兩個形狀。

http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/svginteractivity.htm

觸發創建之前指定的警報的事件。這些復雜形狀（像更簡單的矩形）也會響應 CSS 選擇器。使用一行 CSS 即可實現簡單的突出顯示機制：

CSS path:hover {fill:yellow;}

Canvas

另一種向用戶提供更豐富的圖形體驗的方法，通過 <canvas> 標記提供，該標記由 Apple for Safari 在 HTML5 中或在其他圖形小工具中引入。它在繪制即時模式圖形（包括矩形、路徑和圖像）方面公開更具編程性的體驗，與 SVG 類似。即時模式圖形呈現是一個“觸發即忘”模型，該模型將圖形直接呈現到屏幕上，但隨后對所完成的操作不保留任何上下文。與保留模式相反，不保存呈現的圖形；要在每次需要新框架時描述整個場景，開發人員需要重新調用所有必需的繪圖命令，而不考慮實際更改（SVG 已知擁有“場景圖”）。

元素

為了使用畫布 (Canvas) 功能，Web 開發人員直接引入了一個 Canvas 元素：

HTML <canvas id="myCanvas" width="1200px" height="1200px"></canvas>

然后使用 <canvas> 傳統的2D基礎庫 API 來繪制圖像和向量。

使用 JavaScript 代碼執行對畫布上圖形的操作，通過添加對圖形的支持可以獲得 Web 開發人員熟悉使用的優勢。

JavaScript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d");

如前面提到的，存在與 SVG 中相似的形狀和對象，舉例來說，開發人員可以使用下面的代碼來繪制矩形：

JavaScript ctx.fillStyle = "rgb(0,0,255)"; ctx.fillRect(10, 10, 100, 100);

稍后將討論這些方法的優缺點以及適當的方案。

最終結果與在 SVG 中相同。http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasintro.htm

但正如 SVG 一樣，Canvas 具有更復雜的幾何基元，區別在于這些基元采用函數形式。

事件的可編程性

為了能夠繪制比矩形更復雜的圖形（如前面顯示的夏威夷地圖），canvas?API 提供了一個路徑 API，該路徑 API 支持與 SVG 中的?<path>?元素相似的命令，只是你要對每一行代碼段調用相應的 API，而不是在單個屬性中列出它們：

JavaScript ctx.beginPath(); ctx.moveTo(233.08751,519.30948); ctx.lineTo(235.02744,515.75293); ctx.lineTo(237.29070000000002,515.42961); ctx.lineTo(237.61402,516.23791); ctx.lineTo(235.51242000000002,519.30948); ctx.lineTo(233.08751,519.30948); ctx.closePath();

有關夏威夷地圖，請參閱?http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasmap.htm。

路徑 API 并不局限于?moveTo?和?arc，它包含相同的 SVG 方向相位（包括二次曲線和貝塞爾曲線）。

通過有限的事件和功能可以捕獲鼠標在圖像上的位置。因為不存在圖形保留知識，所以編程人員必須轉換?mouseX?標記的單個元素上的?mouseY、<canvas>?坐標，然后將該命令相應地傳送到位于內存中結構中的形狀。第三方庫為支持更復雜的路徑而存在，這包括內置?isPointInPath?API，但后者被限制為最后路徑繪制。因而與 SVG 不同，既沒有任何樣式也不支持多個幾何圖上的命中檢測。另外，因為 Canvas 不支持可伸縮性，所以縮放時夏威夷地圖將很快失真：

Canvas 是一個功能強大的低級別 API，開發人員利用它可以提供新的圖形體驗。

Canvas 與 SVG 的簡要摘要

下面是簡要摘要，可幫助你確定何時使用 Canvas 而不使用 SVG 或者何時使用 SVG 而不使用 Canvas 來創建向量圖形。

Canvas SVG

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

在上表中，考慮這二者在現有軟件方面的意象模型。Canvas 類似于 MSPaint，在其中，你可以使用形狀和其他工具來繪制和創建圖像。SVG 類似于 Office PowerPoint 幻燈片，它具有可編程的支持并且能夠添加主題。

何時使用?<canvas>、何時使用 SVG：方案

這一節介紹這兩種技術的技術優勢和限制，包括用于確定一種技術何時相對于另一種技術更適合的常用方法。應該注意的是，SVG 和?<canvas>?都能實現幾乎相同的結果，功能也完全重復。介紹以下特定情況非常重要：<canvas>?明顯好于 SVG，或相反，二者組合更加合適，或可以使用和考慮任一技術。

這些方案比較清晰地描述了更適合使用 SVG 的情況、更適合使用 Canvas 的情況，以及其他介于這之間的情況。它們描述了每種技術的優缺點，以便開發人員可以了解相應技術的行為并針對其應用程序做出好的選擇。

從性能方面選擇

有時存在一些外部影響，要求獨立于（或幾乎獨立于）功能選擇技術。有關使用 Canvas 或 SVG 的問題，存在兩個主要區別。

有時開發人員的知識、技能組合和現有資產會對技術的選擇起到重大作用。如果開發人員具備低級別圖形 API 方面的深層知識，但在 Web 技術方面知識有限，則很可能會選擇 Canvas 技術。

另外，性能對于高流量的網站來說是絕對關鍵的。可以對這兩種技術的性能特征加以比較。這可能會要求開發 Canvas 沒有附帶的輔助功能、自定義樣式以及更粒度化的用戶交互功能。雖然 Canvas 通常被視為具有高性能，但是并不意味著它就是明顯的選擇。下圖顯示了 SVG 對象和 Canvas 對象之間在呈現時間上的差異。

一般情況下，隨著屏幕大小的增大，畫布將開始降級，因為需要繪制更多的像素。隨著屏幕上的對象數目增多，SVG 將開始降級，因為我們正不斷將這些對象添加到 DOM 中。這些度量不一定準確，以下方面的不同一定會引起變化：實現和平臺、是否使用完全硬件加速的圖形，以及 JavaScript 引擎的速度。

高保真度的復雜向量文檔

高保真度的復雜向量文檔已經成為并將繼續成為 SVG 的最有效點，原因主要有兩個。存在足夠多的極為詳細的文檔，包括由 CAD 程序生成的那些文檔，針對這些文檔，SVG 的?scalable?部分提供了獨立文檔形式或嵌入網頁中的文檔形式的詳細視圖。通過該技術還可以進行高保真打印。SVG 的聲明性性質向工具、客戶端或服務器端提供從數據庫生成形狀的能力。最后，我們看到了政府機構的發展，因工程圖（為了專利）或工業圖（為了城市規劃目的）緣故從建議支持轉變為對 SVG 的必需支持。這種轉變還將繼續，因為對于公眾使用的電子文檔（如下），政府部門越來越不是只喜歡一家供應商：

建筑圖、工程圖和樓層圖
電子圖、航空圖和示意圖
組織結構圖
地圖
生物圖

以下各圖顯示了前一方案中可以保留的詳細信息示例。第一個圖像顯示可以在測試驅動網站上找到的網頁快照。它包含呼吸系統圖和元素周期表。

http://ie.microsoft.com/testdrive/Graphics/RealWorldDataAndDiagrams/Default.xhtml

第二個圖像顯示同一張圖放大 1000% 后的效果

盡管考慮到觀察大的示意圖的有用性，但在需要細化到細節處時或者出于工程目的需要打印整個示意圖時，具有可縮放性的?S?將變得足夠清晰和有價值。出于這些原因，我們將高保真度的復雜向量文檔放在譜表的遠端，接近 SVG，如下圖中所示。

這些文檔也可以受益于交互性，這是 SVG 使這些方案最適合于保留圖形模式的第二方面。

增強的 Web 圖形

SVG 作為圖像格式

SVG 另外還常用于簡單圖像，無論是應用程序還是網頁中的圖像，大圖像還是小圖像。由于 SVG 要加載到 DOM 中，或者創建圖像前至少要進行解析，所以性能會稍微有所下降，但相比于呈現網頁的成本（大約幾毫秒），這種下降是極其微小。

在文件大小方面（為了評估網絡流量的目的），下面演示的兩個圖像是一樣的，只差了 1K（SVG 稍微大點，沒有壓縮）。

與以前一樣，因為 SVG 作為圖像格式是可縮放的，所以如果開發人員想要以更大的比例使用該圖像，或者用戶使用高 DPI的屏幕，則可移植網絡圖形 (PNG) 要么會變得異常，要么需要更大形式的文件來實現保真。

SVG 因此可以充當非常好的圖像替換格式，甚至對網頁上最簡單的圖像也是如此。靜態 WebApp/網頁圖像因此落在譜表的 SVG 端。

像素操作

在譜表的另一端，當使用 Canvas 時可以獲得快速的繪圖速度，且不需要保留相應信息。存在若干種最適合于 <canvas> 的實時數據方案。使用光線跟蹤在像平面上通過像素跟蹤光線路徑并模擬其與虛擬對象相遇的效果，可以水化圖像。下圖顯示了這種模擬。

需要很多計算，因此速度依賴于瀏覽器中的 JavaScript 引擎速度。然而盡管大多數情況下本地代碼無可置疑要更快一些，但是隨著 JavaScript 引擎逐漸成熟，我們開始看到在像程序集和 C++ 這樣的時期內這種差距在縮小。

光線跟蹤（通常在 Web 上的背景中完成）獲得的效果甚為廣泛。范圍從創建許多不同的視覺效果（包括根據其他簡單向量圖形創建逼真的圖像）到應用照片過濾器以去除紅眼。

因為 Canvas API 允許開發人員讀寫像素，所以這里唯一的限制是速度和想象力。上一個示例由 Adam Burmister 提供并且位于?http://labs.flog.co.nz/raytracer/上。在此示例中，可通過大量的庫來實現創建最終圖像所需的計算，但主結束函數是?fillRect。

JavaScript setPixel: function(x, y, color){ var pxW, pxH;pxW = this.options.pixelWidth;pxH = this.options.pixelHeight; this.canvas.fillStyle = color.toString(); this.canvas.fillRect (x * pxW, y * pxH, pxW, pxH); },

出于此原因，高性能圖形（如光線跟蹤器）作為 Canvas 方案落在譜表的最左端，如下圖所示。

注意生成上述光線跟蹤器的作者注意因為該方案將產生靜態圖像，所以桌面軟件經過了很好的調整以適合光線跟蹤器所需的大量浮動操作。

下至金屬像素操作的有趣實現是圖像的過濾器應用。過濾器已存在于 Web 上，且需要顯著的處理速度（受益于其對圖形管道中更深層的硬件加速圖形的應用），因此開發人員可以試用邊緣檢測或其他數學表達式等算法。

實時數據

對于更常見的方案，Canvas 非常適合輸出實時數據。請注意如何簡便地確定這些方案，因為已經表明使用 Canvas 難以進行用戶交互。因此，下面將討論非交互的實時數據可視化。

今天的天氣數據可以通過特定間隔內服務器上生成的圖像非常靜態地呈現，也可以盡可能快地通過客戶端第三方插件呈現。盡管 ECWMF 已經研究過使用 SVG 而不使用服務器生成的圖像如何節省成本，但是 Canvas 在天氣模式（以及其他快速的實時數據）的大多數圖形表示形式方面，明顯是贏家。下圖顯示以圖形方式顯示在地圖上的天氣模式。

如你可以從上圖中看到的，沒有必要存在大的繪圖圖面，而且屏幕上的對象數量是相當高的。通過使用 Canvas API，可以在不影響 DOM 的情況下快速繪制（和擦除）這些對象。盡管可以使用 SVG Ellipse 完成此操作，但是將它們加載到 DOM 中以及通過動畫修改它們的成本是非常高的。事實上，無論你是在圖像中還是在數據動畫中看到大量的形狀（尤其是不相似的形狀）要進行分析，通常都會指出 Canvas 是要使用的技術。這里的實際限制是受 CPU 速度和 JavaScript 引擎速度的控制，能多快可視化顯示數據。但除了占用 CPU 的光線跟蹤方案之外，仍然可以實現合理的動畫。Reasonable?描述客戶端可以使用 JavaScript 執行的操作與服務器可以通過電線計算和封送的操作之間的相對動畫。

此方案似乎是?<canvas>?的關鍵用例。

像素替換（綠屏）

另一個使用 Canvas 的可能情況是，在視頻上進行顏色檢測以便用其他場景或圖像替換背景色。像光線跟蹤器或過濾器一樣，因 JavaScript 中當前性能速度限制的緣故，很可能會使用桌面軟件預處理任何需要高的最終產品質量的現實方案。但是，由于 <canvas> 是為低級別像素讀取和寫入設計的，因此諸如?greenscreen?替換之類的方案甚至無法使用 SVG 完成。

從兩個視頻中讀寫像素到另一個視頻中所需的代碼要求使用兩個視頻、兩個畫布和一個最終畫布。一次捕捉視頻上的一幀，然后繪制到兩個單獨的畫布上。這樣允許讀回數據。

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

因此，下一步是檢索每個繪制圖像的句柄，以便你可以檢查每個單獨的像素。

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

獲取后，代碼將瀏覽綠屏的像素數組，搜索綠色像素，如果找到，代碼將用背景場景中的像素替換所有綠色像素。

JavaScript 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];} }

最后，像素數組將寫入到目標畫布中。

JavaScript ctxDest.putImageData(currentFrameSource1, 0, 0);

http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasgreenscreen.htm（若要完整地查看 greenscreen 代碼，請查看該頁的源代碼。）

組合/交叉方案

以下方案可以在 SVG 或 Canvas 中完成，都可以獲得適當的結果，但你可能會更喜歡一項技術勝過另一項技術。

圖表和圖形

需要向量圖形的圖表和圖形的譜表很寬廣。大部分這些圖形最好使用 SVG 進行創建，因為它們具有下列三個特征之一：

圖形是從可以輕松轉換為 XML (SVG) 的現有數據生成的
它們需要用戶交互
優點是可在網頁上設置樣式

我們使用可顯著增加方案范圍的交互功能來擴展高保真文檔方案。其中包括：

交互的組織結構圖和流程圖
數據圖（環形圖、條形圖、散點圖）
交互式地圖 - 路徑查找
建筑圖、工程圖和樓層圖
航班或音樂廳的座位圖

已經確定快速的實時數據處理已針對 Canvas 進行了更好地優化（主要取決于速度）。

二維游戲

制作休閑游戲（此處定義為 Web 上的簡單二維游戲）時，開發人員需要在 canvas 和 svg 之間做出選擇。因為歷史上游戲庫一直利用較低級別的圖形 API，所以將傾向于選擇?<canvas>。

當庫的其他組成部分（如受歡迎的物理引擎）比圖形層要明顯深時，圖形將變成實現細節。邊框、速度、大小和位置等圖形幾何將傳遞給引擎，而引擎隨后將用速度、碰撞和位置進行響應。圖形位于堆棧中的最高層。

通過由同一作者開發的兩個游戲來演示獨立于游戲邏輯的圖形概念，旨在說明?<svg>?和?<canvas>：SVG-oids?和?canvas-pinball。一個出色的、獨立于游戲引擎的圖形層示例是將?canvas-pinball?與?SVG-Dice?進行比較（當兩者都使用相同的物理引擎時）。

盡管游戲和演示邏輯是不同的，但是這兩個游戲的物理引擎都會跟蹤位置、碰撞、速度以及游戲組成部分的其他物理方面。

對于 canvas-pinball，自定義的更高級別的動畫管理器通過使用一系列 Canvas API 重新繪制場景。

JavaScript if (animationsInProgress) {ctx.save();ctx.lineWidth = 2.0;ctx.beginPath();ctx.moveTo(89, 322);ctx.lineTo(101, 295);...ctx.stroke();ctx.restore();ctx.moveTo(tVp.x, tVp.y); }

對于 SVG Dice，自定義的更高級別的動畫管理器使用組轉換通過 DOM 在屏幕上重新定位現有圖形。

JavaScript if (animationsInProgress) { this.rotation += (this.circleBody.m_linearVelocity.x/20); var transFormString = "translate(" +Math.round(this.circleBody.m_position.x) + "," +Math.round(this.circleBody.m_position.y) + ") scale (" + this.scale.toString() + ") rotate(" +Math.round(this.rotation).toString() + "," +Math.round(this.xTrans).toString() + "," +Math.round(this.yTrans).toString() + ")"; this.die2.setAttribute("transform", transFormString); }

一種技術要重新繪制和重新定位形狀，而另一種技術只需重新定位，但需要在內存中維護形狀，這會帶來成本。此成本對于大多數休閑游戲來說都是相當低的，但預期是使用較低級別的 API 實現即時模式圖形的游戲更加讓人熟悉。

高級方案

可能大部分功能強大的方案都會涉及組合整個圖形、樣式和文檔技術。

用戶界面設計

幾年前可能就在爭論 SVG 是否是適合用于用戶界面設計的技術。這些要求與 SVG 一致。事實上，Linux 操作系統的至少一個前端完全建立在 SVG 之上。滑塊、復選框、圓形按鈕等控件以及其他標準固有控件集中的非框控件都很適合在向量圖形中使用。但是，隨著 CSS 的最近和未來開發（包括圓角、漸變、過濾器和打印機事件），可以通過標準的框模型 HTML 文檔中心構造來開發大多數這些控件。其他控件（尤其是使用最新 CSS Grid 和 Flexbox 模型的控件）都更好地面向 HTML 元素，至少作為容器。

此處提供了一個豐富的數據驅動圖表的示例。盡管該示例的輸出沒有架構好，但顯示的最終結果正確。圖形和圖表控件是眾所周知的難開發，但第三方以及 Microsoft 已經成功了。通過在客戶端或服務器端提供最新的數據綁定抽象，客戶端的 Web 呈現主要保持靜態或者需要插件，這樣可減輕開發人員的負擔。下面我們利用了 SVG 的豐富性來提供增強的用戶體驗。無論代碼如何（將傳遞給客戶端，又或許在將來更多的聲明性交互中使用），圖表都用兩個關鍵組件來呈現。工具和數據。圖形工具或背景是基本的靜態 SVG：

HTML <rect id="tipsh" x="20" y="100" width="194" height="34" rx="5" ry="5" /> <rect id="tip" x="20" y="100" width="190" height="30" rx="5" ry="5" /> <text id="tiptxt" x="40" y="120" font-size="12" font-family="Arial" fill="#ffffff" visibility="hidden">milliseconds</text> <polygon id="arrow" points="10,110 20,105 20,115" style="fill:#ffffff" /> <line x1="3" x2="460" y1="359" y2="359" style="stroke:#cccccc;stroke-width:1"/>

然后每個單獨的數據點要么傳遞到客戶端并進行操作，要么在服務器上生成：

HTML <text x="10" y="348" font-size="12" font-family="Arial">{Page}.svg</text> <rect x="115" y="350" width="86" height="8" style="fill:url(#inverseblue);filter:url(#Gaussian_Blur);" rx="12" ry="12"/> <rect x="115" y="333" width="86" height="17" rx="12" ry="12" onmouseover="changeColor(evt)" onmousemove="changeText(evt,'2 milliseconds')" onmouseout="changeTextNotOver(evt)" /> <text x="171" y="345" font-size="11" font-family="Arial" fill="#ffffff">6.1%</text>

http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/svgchart.htm

結論

通過最新瀏覽器中提供的現有向量圖形技術的分析功能，可以交互方式使用標準 Web 技術來滿足現有的和新的方案。從今以后，我們將擁有巨大的機會可以讓聲明性動畫支持廣告版位。通過使用方案驅動的功能開發，我們可以在競爭中處于領先地位，并在 Web 應用程序和網頁中提供基于標準的圖形豐富的體驗。

總結

以上是生活随笔為你收集整理的如何在 SVG 和 Canvas 之间进行选择的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：自定义填充图案插件 cad_20个超实用
下一篇： POI 实现Word替换书签