即時模式和保留模式

區(qū)分即時模式和保留模式至關(guān)重要。HTML5 Canvas是前者的示例，SVG是后者的示例。

即時模式意味著，一旦您的繪圖在畫布上，畫布就會停止跟蹤它。換句話說，作為開發(fā)人員，您需要制定繪制對象的命令，創(chuàng)建和維護(hù)最終輸出應(yīng)是什么樣子的模型或場景，并指定需要更新的內(nèi)容。瀏覽器的圖形API只是將您的繪圖命令傳達(dá)給瀏覽器，然后瀏覽器執(zhí)行這些命令。

SVG使用保留模式，您只需發(fā)出要在屏幕上顯示的內(nèi)容的繪圖指令，瀏覽器的圖形API就會創(chuàng)建最終輸出的內(nèi)存中模型或場景，并將其轉(zhuǎn)換為瀏覽器的繪圖命令。

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

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

HTML5 Canvas：優(yōu)點(diǎn)和缺點(diǎn)

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

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

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

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

（此處應(yīng)嵌入Sarah Drasner的推文截圖）

HTML5 Canvas擅長什么？

Alvin Wan根據(jù)繪制的對象數(shù)量和對象或畫布本身的大小，對Canvas和SVG的性能進(jìn)行了基準(zhǔn)測試。他將結(jié)果總結(jié)如下：

總之，當(dāng)處理數(shù)百甚至數(shù)千個對象時，DOM渲染的開銷更為明顯；在這種情況下，Canvas是明顯的贏家。但是，畫布和SVG都不受對象大小的影響。鑒于最終統(tǒng)計數(shù)據(jù)，畫布在性能方面提供了明顯的優(yōu)勢。

根據(jù)我們對Canvas的了解，特別是它在繪制大量對象方面的出色性能，以下是一些可能適合甚至優(yōu)于SVG的場景。

游戲和生成式藝術(shù)

對于圖形密集型、高度交互式游戲，以及生成式藝術(shù)，Canvas通常是最佳選擇。

光線追蹤

光線追蹤是一種創(chuàng)建3D圖形的技術(shù)。

光線追蹤可用于通過追蹤圖像平面中像素的光線路徑并模擬其與虛擬對象的相遇效果來填充圖像……光線追蹤實現(xiàn)的效果……范圍從……從簡單的矢量圖形創(chuàng)建逼真的圖像到應(yīng)用類似照片的濾鏡以去除紅眼?！猄VG與Canvas：如何選擇，Microsoft Docs。

如果您好奇，這是Mark Webster正在運(yùn)行的光線追蹤應(yīng)用程序。

但是，盡管HTML5 Canvas肯定比SVG更適合這項任務(wù)，但這并不一定意味著光線追蹤最好在<canvas></canvas>元素上執(zhí)行。事實上，對CPU的壓力可能相當(dāng)大，以至于瀏覽器可能會停止響應(yīng)。

在小表面上繪制大量對象

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

視頻中的像素替換

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

HTML5 Canvas不擅長什么？

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

可縮放性

大多數(shù)可縮放性是優(yōu)勢的場景都將更好地使用SVG而不是Canvas。高保真、復(fù)雜的圖形，如建筑和工程圖、組織結(jié)構(gòu)圖、生物圖等，就是這種情況的例子。

使用SVG繪制時，放大圖像或打印圖像會保留所有細(xì)節(jié)，達(dá)到很高的質(zhì)量水平。您還可以從數(shù)據(jù)庫生成這些文檔，這使得SVG的XML格式非常適合這項任務(wù)。

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

也就是說，借助CreateJS和Zim（擴(kuò)展CreateJS）等一些優(yōu)秀的庫，開發(fā)人員可以相對快速地將其鼠標(biāo)事件、命中測試、多點(diǎn)觸控手勢、拖放功能、控件等等集成到基于Canvas的創(chuàng)作中。

可訪問性

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

不依賴于JavaScript

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

將HTML5 Canvas和SVG結(jié)合用于高級場景

在某些情況下，您的應(yīng)用程序可以通過結(jié)合HTML5 Canvas和SVG來獲得兩全其美。例如，基于Canvas的游戲可以使用矢量編輯程序生成的SVG圖像作為精靈，以利用其可縮放性和與PNG圖像相比更小的下載大小?；蛘?，繪圖程序可以使用SVG設(shè)計其用戶界面，并嵌入<canvas></canvas>元素用于繪圖。

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

結(jié)論

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

答案是什么？

Chris Coyier同意Benjamin De Cock的觀點(diǎn)，后者在推特上寫道：

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

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

Dr Abstract提供了許多最適合使用Canvas構(gòu)建的事物清單，包括交互式徽標(biāo)和廣告、交互式信息圖表、電子學(xué)習(xí)應(yīng)用程序等等。

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

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

（此處應(yīng)包含F(xiàn)AQ部分，根據(jù)原文內(nèi)容進(jìn)行改寫，保持簡潔明了，并使用更自然的語言表達(dá)。）