帆布與SVG：選擇合適的工具

HTML5 Canvas與SVG：選擇哪一個？

HTML5 Canvas和SVG都是基於標準的HTML5技術，可用於創建令人驚豔的圖形和視覺效果。本文探討一個關鍵問題：在項目中選擇哪一個技術更合適？換句話說，在哪些情況下更傾向於使用HTML5 Canvas而不是SVG？

首先，讓我們簡要介紹HTML5 Canvas和SVG。

關鍵要點

• HTML5 Canvas和SVG都是用於創建圖形和視覺體驗的HTML5技術。 Canvas依賴於分辨率，用於動態渲染圖表、遊戲圖形、藝術作品或其他視覺圖像。 SVG（可縮放矢量圖形）是一種XML文件格式，在縮放時可保持其質量。
• HTML5 Canvas和SVG的工作方式根本不同。 Canvas是一種即時圖形系統，一旦像素繪製完成，就會被丟棄。 SVG採用保留模式，繪製的每個對像都會添加到瀏覽器的內部模型中，這對於開發人員來說更容易，但可能會影響性能。
• HTML5 Canvas非常適合圖形密集型、高度交互式遊戲、生成式藝術以及需要在小表面上繪製大量對象的場景。但是，放大或在Retina顯示屏上顯示時，其質量可能會下降。
• 對於需要可縮放性的場景（例如高保真、複雜的圖形，如建築和工程圖、生物圖和組織結構圖），SVG更可取。 SVG在可訪問性方面也更好，因為它可以被人類和機器讀取。
• 可以將HTML5 Canvas和SVG結合起來用於高級場景。例如，基於Canvas的遊戲可以使用SVG圖像作為精靈，或者繪圖程序可以使用SVG設計其用戶界面，並嵌入Canvas元素進行繪圖。

什麼是HTML5 Canvas？

WHATWG規範對canvas元素的介紹如下：

canvas元素為腳本提供了一個依賴於分辨率的位圖畫布，可用於動態渲染圖表、遊戲圖形、藝術作品或其他視覺圖像。

換句話說，<canvas></canvas>標籤提供了一個表面，您可以使用JavaScript可編程接口逐像素創建和操作光柵圖像。

這是一個基本的代碼示例：

（此處應嵌入CodePen示例，展示基本的Canvas形狀）

由於依賴於分辨率，在<canvas></canvas>上創建的圖像在放大或在Retina顯示屏上顯示時，質量可能會下降。

繪製簡單的形狀只是冰山一角。 HTML5 Canvas API允許您繪製弧線、路徑、文本、漸變等。您還可以逐像素操作圖像。這意味著您可以替換圖形某些區域中的顏色，可以動畫化您的繪圖，甚至可以將視頻繪製到畫布上並更改其外觀。

什麼是SVG？

SVG代表可縮放矢量圖形。根據規範：

SVG是一種用於描述二維圖形的語言。作為獨立格式或與其他XML混合使用時，它使用XML語法。與HTML5混合使用時，它使用HTML5語法……

SVG繪圖可以是交互式和動態的。動畫可以通過聲明方式（即通過在SVG內容中嵌入SVG動畫元素）或通過腳本定義和触發。

SVG是一種XML文件格式，用於創建矢量圖形。可縮放的特性使其能夠在保持清晰度和高質量的同時增加或減少矢量圖像。 （HTML5 Canvas生成的圖像無法做到這一點）。

以下是使用SVG繪製的相同紅色正方形（之前使用HTML5 Canvas創建）：

（此處應嵌入CodePen示例，展示基本的SVG形狀）

您可以使用SVG執行大部分可以使用Canvas執行的操作，例如繪製形狀和路徑、漸變、圖案、動畫等等。但是，這兩種技術的工作方式根本不同。與基於Canvas的圖形不同，SVG具有DOM，因此CSS和JavaScript都可以訪問它。例如，您可以使用CSS更改SVG圖形的外觀，使用CSS或JavaScript為其節點設置動畫，使任何部分像

一樣響應鼠標或鍵盤事件。正如在以下部分中將更清楚地看到的那樣，當您需要在下一個項目中在Canvas和SVG之間進行選擇時，這種差異起著重要的作用。

即時模式和保留模式

區分即時模式和保留模式至關重要。 HTML5 Canvas是前者的示例，SVG是後者的示例。

即時模式意味著，一旦您的繪圖在畫布上，畫布就會停止跟踪它。換句話說，作為開發人員，您需要製定繪製對象的命令，創建和維護最終輸出應是什麼樣子的模型或場景，並指定需要更新的內容。瀏覽器的圖形API只是將您的繪圖命令傳達給瀏覽器，然後瀏覽器執行這些命令。

SVG使用保留模式，您只需發出要在屏幕上顯示的內容的繪圖指令，瀏覽器的圖形API就會創建最終輸出的內存中模型或場景，並將其轉換為瀏覽器的繪圖命令。

作為即時圖形系統，Canvas沒有DOM或文檔對像模型。使用Canvas，您繪製像素，系統會忘記所有這些像素，從而減少了維護繪圖內部模型所需的額外內存。使用SVG，您繪製的每個對像都會添加到瀏覽器的內部模型中，這使得您作為開發人員的生活更容易一些，但在性能方面會付出一些代價。

基於即時模式和保留模式之間的區別，以及Canvas和SVG各自的其他特定特性，可以概述一些使用一種技術而不是另一種技術可能更好地服務於項目目標的情況。

HTML5 Canvas：優點和缺點

HTML5 Canvas規范明確建議作者不應在有其他更合適的方法可用時使用<canvas></canvas>元素。

例如，對於圖形豐富的元素，最好的工具是HTML和CSS，而不是<canvas></canvas>（順便說一句，SVG也不是）。 Zim JS畫布框架的創建者和創始人Dr Abstract證實了這種觀點，他寫道：

DOM和DOM框架擅長顯示信息，特別是文本信息。相比之下，畫布是一張圖片。文本可以添加到畫布中，並且可以使其具有響應性，但文本不能像在DOM上那樣輕鬆地被選擇或搜索。長滾動文本頁面或文本和圖像頁面是DOM的絕佳用途。 DOM非常適合社交媒體網站、論壇、購物以及我們習慣使用的所有信息應用程序。 ——“何時使用JavaScript畫布庫或框架”

因此，這是一個關於何時不使用<canvas></canvas>的明確示例。但是，<canvas></canvas>何時是一個不錯的選擇呢？

（此處應嵌入Sarah Drasner的推文截圖）

HTML5 Canvas擅長什麼？

Alvin Wan根據繪製的對像數量和對像或畫布本身的大小，對Canvas和SVG的性能進行了基準測試。他將結果總結如下：

總之，當處理數百甚至數千個對象時，DOM渲染的開銷更為明顯；在這種情況下，Canvas是明顯的贏家。但是，畫布和SVG都不受對像大小的影響。鑑於最終統計數據，畫佈在性能方面提供了明顯的優勢。

根據我們對Canvas的了解，特別是它在繪製大量對象方面的出色性能，以下是一些可能適合甚至優於SVG的場景。

遊戲和生成式藝術

對於圖形密集型、高度交互式遊戲，以及生成式藝術，Canvas通常是最佳選擇。

光線追踪

光線追踪是一種創建3D圖形的技術。

光線追踪可用於通過追踪圖像平面中像素的光線路徑並模擬其與虛擬對象的相遇效果來填充圖像……光線追踪實現的效果……範圍從……從簡單的矢量圖形創建逼真的圖像到應用類似照片的濾鏡以去除紅眼。 ——SVG與Canvas：如何選擇，Microsoft Docs。

如果您好奇，這是Mark Webster正在運行的光線追踪應用程序。

但是，儘管HTML5 Canvas肯定比SVG更適合這項任務，但這並不一定意味著光線追踪最好在<canvas></canvas>元素上執行。事實上，對CPU的壓力可能相當大，以至於瀏覽器可能會停止響應。

在小表面上繪製大量對象

另一個示例是應用程序需要在相對較小的表面上繪製大量對象的場景——例如非交互式實時數據可視化，例如天氣模式的圖形表示。

視頻中的像素替換

如這篇HTML5 Doctor文章所示，另一個適合使用Canvas的示例是將視頻背景顏色替換為不同的顏色、另一個場景或圖像。

HTML5 Canvas不擅長什麼？

另一方面，在許多情況下，與SVG相比，Canvas可能不是最佳選擇。

可縮放性

大多數可縮放性是優勢的場景都將更好地使用SVG而不是Canvas。高保真、複雜的圖形，如建築和工程圖、組織結構圖、生物圖等，就是這種情況的例子。

使用SVG繪製時，放大圖像或打印圖像會保留所有細節，達到很高的質量水平。您還可以從數據庫生成這些文檔，這使得SVG的XML格式非常適合這項任務。

此外，這些圖形通常是交互式的。例如，當您在線預訂機票時，請考慮座位圖，這使其成為SVG等保留圖形系統的絕佳用例。

也就是說，借助CreateJS和Zim（擴展CreateJS）等一些優秀的庫，開發人員可以相對快速地將其鼠標事件、命中測試、多點觸控手勢、拖放功能、控件等等集成到基於Canvas的創作中。

可訪問性

儘管您可以採取一些步驟來提高Canvas圖形的可訪問性——一個好的Canvas庫（如Zim）可以幫助您加快此過程——但在可訪問性方面，Canvas並不出色。您在畫布表面上繪製的內容只是一堆像素，輔助技術或搜索引擎機器人無法讀取或解釋這些像素。這是SVG更可取的另一個領域：SVG只是XML，這使得人和機器都可以讀取它。

不依賴於JavaScript

如果您不想在應用程序中使用JavaScript，那麼Canvas就不是您的最佳選擇。事實上，您使用<canvas></canvas>元素的唯一方法是使用JavaScript。相反，您可以使用Adobe Illustrator或Inkscape等標準矢量編輯程序繪製SVG圖形，並且可以使用純CSS來控制其外觀並執行引人注目的、細微的動畫和微交互。

將HTML5 Canvas和SVG結合用於高級場景

在某些情況下，您的應用程序可以通過結合HTML5 Canvas和SVG來獲得兩全其美。例如，基於Canvas的遊戲可以使用矢量編輯程序生成的SVG圖像作為精靈，以利用其可縮放性和與PNG圖像相比更小的下載大小。或者，繪圖程序可以使用SVG設計其用戶界面，並嵌入<canvas></canvas>元素用於繪圖。

最後，像Paper.js這樣功能強大的庫可以使您能夠在HTML5 Canvas之上編寫矢量圖形腳本，從而為開發人員提供了一種方便的方式來同時使用這兩種技術。

結論

在本文中，我探討了HTML5 Canvas和SVG的一些關鍵特性，以幫助您確定哪種技術最適合特定任務。

答案是什麼？

Chris Coyier同意Benjamin De Cock的觀點，後者在推特上寫道：

回答這個問題的一種極其基本的方法是“當您無法使用svg時使用canvas”（其中“無法”可能意味著動畫化數千個對象、單獨操作每個像素等）。換句話說，SVG應該是您的默認選擇，canvas是您的備用方案。

— Benjamin De Cock (@bdc) 2019年10月2日

Dr Abstract提供了許多最適合使用Canvas構建的事物清單，包括交互式徽標和廣告、交互式信息圖表、電子學習應用程序等等。

在我看來，對於何時最好使用Canvas而不是SVG，並沒有什麼硬性規定。即時模式和保留模式之間的區別表明，在構建圖形密集型遊戲等方面，HTML5 Canvas是無可爭議的贏家，而對於平面圖像、圖標和UI元素等，SVG則更可取。但是，在這兩者之間，HTML5 Canvas還有擴展其應用範圍的空間，特別是考慮到各種強大的Canvas庫可以提供什麼。它們不僅使在同一圖形工作中更容易同時使用這兩種技術，而且還使Canvas原生項目中一些難以實現的功能（如交互式控件和事件、響應能力、可訪問性功能等等）現在可以為大多數開發人員所用，這為HTML5 Canvas更有趣的用途打開了大門。

Canvas與SVG的常見問題解答 (FAQs)

（此處應包含FAQ部分，根據原文內容進行改寫，保持簡潔明了，並使用更自然的語言表達。）

以上是帆布與SVG：選擇合適的工具的詳細內容。更多資訊請關注PHP中文網其他相關文章！