簡介
2010 年 8 月 7 日，deviantART 慶祝 10 週年。 慶祝生日，我們推出一款名為 deviantART muro 的 HTML5 繪圖工具。 這項工具可以當做獨立的網頁應用程式，也可提供用於在論壇留言中新增相片的簡易繪圖工具。
DeviantART 社群抱持著充滿熱忱的全新繪圖工具，而這項工具本身帶來的流量，現在與某些低廉的網站資源相比可觀。自推出以來，大約每 5 秒使用 deviantART muro 提交新繪圖。這些只是完成的繪圖數量，許多程式已經開始而尚未儲存。
以下文章提供一些背景資訊，讓您瞭解我們如何使用 HTML5、為何選擇使用我們開發的技術，以及我在為大型網站撰寫其中一種完整編寫 HTML5 應用程式時發現的事情。
我的資歷
在 2005 年底，我是負責在此繪製繪圖工具的開發人員。這項工具是由書籤小程式啟動的「網頁塗鴉」工具。 用於在任何網頁上繪圖。Draw Here 是最初使用 SVG 製作的 (Firefox 1.5 Beta 版剛推出，是最早支援 SVG 的瀏覽器之一)。
在 Internet Explorer 中，我們是在背景建立 SVG，但使用 VML 算繪繪圖。WebKit 當時不支援可擴充向量圖形，所以我將程式碼移植到使用畫布算繪 SVG (當時僅在 WebKit 才見的新技術)。之前，我甚至建立了連接埠，讓許多 div 元素都能在舊版瀏覽器中算繪 SVG 程式碼。(當然，這比較像是個笑話，讓使用者知道可以完成這個過程，卻覺得使用速度很慢)。
他今天早上使用 Draw Here，每天繪製大約 100 幅繪圖。 儘管沒有主要網頁應用程式的最終更新，仍可呼叫這項參考資料，而不僅僅是實驗。2006 年中旬，我們放棄了該專案，但網站至今仍持續進行中，大多數人僅是研究禮物。
deviantART muro 使用的技術
基於我的背景，我早日就使用各種 HTML5 技術， 因此我要求擔任 deviantART muro 的首席開發人員。所有閱讀本文的人，都可能瞭解為何決定使用 HTML5，而不是使用 Silverlight 或 Flash 這類外掛程式的技術。我們想要的是功能強大且採用開放標準的工具。
選擇畫布和可擴充向量圖形
我們決定使用畫布來繪製繪圖圖層有些人可能想知道何時該使用畫布，以及何時該使用 SVG。這兩項技術可完成的重疊範圍很廣，如 Draw Here 所證明，這兩種技術都可用來建立繪圖應用程式。
我發現，如果你想保留先前繪製物件的控點，那麼 SVG 就很實用。 舉例來說，如果您希望使用者能夠繪製線條，然後拖曳線條的位元來變更形狀，使用 SVG 會是相當簡單的做法。同樣的，使用畫布也真的太怪了。
當你使用畫布時，會在畫布上發動東西，之後卻忘記把東西放在畫布上。 空白畫布和繪製在一小時的畫布運作方式與程式碼中的相同，且兩者的記憶體用量相同。雖然光柵繪圖程式通常能完美搭配火災使用，但會忘記技術，卻會導致某些事情變得困難。舉例來說，在畫佈建立快速復原函式比 SVG 更難。使用 SVG 時，你可以只保留最後幾行放置的控點，而復原操作就只是去除這些物件。在畫布上，繪製線條後，您就會不知道其底下是什麼，因此如果移除線條，就必須重新繪製其所在區域。
拿起要點，並決定用 HTML5 製作畫布後，我們就決定用一些其他的 HTML5 好玩的廣告。例如，我們如何使用 localStorage 追蹤使用者的筆刷設定。如此一來，當他們已經按照自己的需求完成各種筆刷設定後，可以在下次使用我們的工具時重新使用這些設定。localStorage 代表我們不必使用 Cookie 或進行伺服器行程就能取得這些偏好設定。
使用畫布
過去五年來，無框畫經過了大幅發展。使用 Draw Here 時，由於效能不理想，我們實際上沒有發布畫布連接埠現在，我認為這個做法的成效可能會比想像中更出色。清除一大區塊的畫布，重新繪製複雜的形狀時，通常會比人類的感知更快。 我發現唯一速度太慢是，使用 getImageData() 對像素進行取樣。 作業速度明顯取決於畫布大小，但以大畫布來說，在錯誤的時間執行 getImageData() 可能需要夠長的時間，才能讓使用者覺得應用程式回應速度很慢。
閱讀各種無框畫教學課程後，我原本誤以為它是非常重的東西，應謹慎使用，也許在單一一或網頁上使用一、兩次。我不確定所有人都有沒有意義，但我確實有這麼做，所以在剛開始編寫 deviantART muro 時便謹慎使用它。不久之後，我發現在許多小地方都能用畫布節省費用。舉例來說，我們應用程式的模擬圖指定顏色挑選器應有兩個重疊的三角形，分別顯示主要顏色和次要顏色：
我的第一步是開始思考要用傳統 HTML 和 CSS 建立這種小小的 UI 小工具。 擅長入侵 CSS 的人可能會指出如何透過 CSS 完成上述所有操作，但由於兩個部分會改變顏色的三角形形狀，會讓網站顯得不清楚。
我一開始只想使用畫布，就利用單一 DOM 元素和幾行 JavaScript 來建構小工具。deviantART muro 會到處使用畫布節點。每個圖層都是畫布，變更圖層順序只是切換 Z-index。顯示縮小檢視畫面的縮放「導覽器」調色盤只是另一種畫布，它偶爾會使用圖層畫布做為來源圖片來呼叫 drawImage()。即使是繪圖區域遊標 (雙色調圓圈，可依據筆刷大小和縮放調整大小) 也是浮動在滑鼠下方的畫布。
這是因為畫布比其他 HTML5 技術更加自由，是因為 Google 的 ExplorerCanvas 程式庫可讓您在 Internet Explorer 中模擬畫布。這會將我導向下一個部分。
Internet Explorer (IE)
至今已有多數大型網站未使用 HTML5 的主要原因，在於他們不想讓 Internet Explorer 使用者遺失。大多數開發人員都會思考第一個問題： deviantART 製作 HTML5 繪圖應用程式 「 IE 怎麼辦？」
我們從一開始就決定盡一切努力在 Internet Explorer 中運作，不過我們當時只用最不常見的分母方式來開發網站。由於網路社群已經採取做法，網站只有在所有已知瀏覽器上看起來都相同時才能啟動，因此使用者無法得知瀏覽器是否缺少瀏覽器。對一般使用者而言，速度問題會破壞網際網路連線品質，而每個網頁的顯示效果也會有所變化。因此，他們可根據任意使用者介面元素 (例如返回按鈕的顏色)，決定自己喜愛的瀏覽器。
我們決定使用 HTML5 規格建立任何酷炫的功能，並設法讓它在 Internet Explorer 中運作。如果無法執行，我們會彈出一個互動視窗，說明無法使用這項功能，因為他們的瀏覽器尚未導入網路標準。
我們一開始嘗試使用 Google 的 ExplorerCanvas (exCanvas) 來建構內容。在大多數情況下，模擬畫布的效果真的很好。不過，它有一個缺點。畫布上的每個筆劃都是基礎 VML 轉譯中的 DOM 物件。對大多數您可能嘗試用畫布的功能來說，這是沒有問題，但有些開發 murotART muro 的筆刷會從多個筆劃分層建立形狀。當 Internet Explorer 面對的 VML 時，VML 含有數千個節點，即使是速度飛快的機器，也會發生效能低落的情況。因此，進行大量繪圖呼叫時，實際上必須執行實際的 VML 程式碼，並運用一些技巧將節點串連在一起，並使用移動指令指定應有缺口的位置。介面中許多控制項和項目都使用畫布標記，因為它們通常都能與 exCanvas 搭配使用。
除了透過 exCanvas 執行部分工作以外，我們也建議使用者，如果已安裝 Google Chrome Frame 外掛程式，即可繼續使用 Internet Explorer 版本。Google Chrome 內嵌框架是一種外掛程式，可在 Internet Explorer 中嵌入 Google Chrome 的顯示引擎。 從使用者的角度來看，他們仍在使用熟悉的瀏覽器。不過，在封面下方，我們的網頁可以透過 Chrome 的 HTML5 功能和更快速的 JavaScript 呈現。
我知道要輕鬆將 Chrome Frame 搭配使用， 但我並沒有意識到這項工具有多簡單。您只加入一個額外的中繼標記，這樣就開始在 IE 中運作了。
摘要
能使用 HTML5 規格中的新技術，實在令人興奮，而我用過的所有功能，也絕對可以說是完美的時候了。即使您需要在 IE 上順暢執行工作，也能將畫布與 exCanvas 搭配出許多意料之外的事。在 SVG 與 VML 之間 編寫轉譯層也顯得很好開始使用這項技術，就像踏上全新世界一樣。