這個元素比其他技術有優勢
HTML5包含一個名為CANVAS的令人興奮的元素。 它有很多用途，但為了使用它，你需要學習一些JavaScript，HTML，有時候還需要CSS。
這使得CANVAS元素對於許多設計師來說有點令人望而生畏，實際上，大多數人可能會忽略這個元素，除非有可靠的工具在不知道JavaScript的情況下創建CANVAS動畫和遊戲。
什麼HTML5畫布用於
HTML5 CANVAS元素可以用於很多以前的事情，您必須使用像Flash這樣的嵌入式應用程序來生成：
- 動態圖形
- 在線和離線遊戲
- 動畫
- 交互式視頻和音頻
實際上，人們使用CANVAS元素的主要原因是將簡單的網頁轉換為動態網頁應用程序變得容易，然後將該應用程序轉換為移動應用程序以用於智能手機和平板電腦。
如果我們有Flash，為什麼我們需要畫布？
根據HTML5規範，CANVAS元素是：
“......一個依賴於分辨率的位圖畫布，可用於即時渲染圖形，遊戲圖形，藝術或其他視覺圖像。”CANVAS元素允許您實時在網頁上繪製圖形，圖形，遊戲，藝術作品和其他視覺效果。
您可能認為我們已經可以使用Flash來做到這一點，但是CANVAS和Flash之間有兩個主要區別：
- CANVAS元素嵌入在HTML中。 繪製它的腳本要么在HTML中，要么在鏈接的外部文件中。 這意味著CANVAS元素是文檔對像模型或DOM的一部分。
- Flash是一個嵌入式外部文件。 它使用EMBED或OBJECT元素來顯示，並且不能直接與其他HTML元素進行交互。 由於CANVAS元素是DOM的一部分，因此它可以通過多種方式與DOM進行交互。
- 例如，您可以創建一個動畫，當頁面的其他部分與之交互時，這些動畫會發生變化 - 例如填充表單元素。使用Flash，您可以做的最多的操作是啟動Flash動畫或動畫，但與CANVAS可以創建許多不同的效果，甚至可以將表單字段中的文本添加到動畫中。
- 網絡瀏覽器本地支持CANVAS元素。 為了讓用戶真正使用Flash，他們的瀏覽器必須安裝插件。 由於過時的Flash安裝或其操作系統根本不支持它，這對大多數人來說通常是一件麻煩事。
- 它曾經是每個瀏覽器都安裝了插件，但現在不再是這種情況了，許多人甚至因為困難而刪除插件。 另外，它還沒有在流行的iOS平台上提供。
即使您從未計劃使用Flash，畫布也很有用
CANVAS元素如此混亂的主要原因之一是許多設計師已經習慣於完全靜態的網頁。 圖片可能是動畫的，但這是用GIF完成的，當然你可以將視頻嵌入到頁面中，但是再次，這是一個靜態視頻，它只是坐在頁面上，可能由於交互而啟動或停止，但僅此而已。
CANVAS元素允許您為網頁添加更多的交互性，因為現在您可以使用腳本語言動態地控製圖形，圖像和文本。 CANVAS元素可幫助您將圖像，照片，圖表和圖形轉換為動畫元素。
何時考慮使用畫布元素
在決定是否使用CANVAS元素時，您的受眾應該是您的首要考慮事項。
如果受眾主要使用Windows XP和IE 6,7或8，那麼創建動態畫布功能將變得毫無意義，因為這些瀏覽器不支持它。
如果您正在構建僅用於Windows機器的應用程序，那麼Flash可能是您最好的選擇。 在Windows和Mac電腦上使用的應用程序可以從Silverlight應用程序中受益。
但是，如果您的應用程序需要在移動設備（包括Android和iOS）以及現代台式計算機（更新至最新瀏覽器版本）上進行查看，那麼使用CANVAS元素是一個不錯的選擇。
請記住，使用此元素可以為不支持它的舊版瀏覽器提供後備選項，例如靜態圖像。
但是，不建議使用HTML5畫布進行所有操作。 您不應該將它用於您的標誌，標題或導航等內容（儘管使用它來製作任何這些內容的一部分都可以）。
根據規範，您應該使用最適合您正在嘗試構建的元素。 因此，使用HEADER元素以及圖像和文本優於用於標題和徽標的CANVAS元素。
另外，如果您正在創建打算在非交互式介質（如打印）中使用的網頁或應用程序，則應該意識到已經動態更新的CANVAS元素可能無法按預期打印。 您可能會打印當前內容或後備內容。