畫布標籤如何在HTML5中有所裨益？

Question

我是一名初級開發人員，我無法理解畫布標籤如何對我們有利？ 我看了很多文章，但我無法從畫布標籤中獲得根本好處。

Answer 1

覺得作爲betwee Photoshop和Illustrator的差異（或Gimp和Inkscape中爲您OSS人）的畫布和SVG之間的差異。一個涉及位圖和其他矢量藝術。

使用畫布時，由於您正在繪製位圖，因此您可以輕鬆塗抹，模糊，刻錄和閃避圖像。但由於它是位圖，你不能輕鬆繪製一條線，然後決定重新定位線。您需要刪除舊線路，然後畫一條新線路。

使用svg，由於您正在繪製矢量，因此您可以輕鬆移動，縮放，旋轉，重新定位，翻轉圖紙。但是因爲它是矢量，所以不能根據線條粗細模糊邊緣，或者無縫地將紅色圓圈融入藍色方形。您需要通過在對象之間繪製中間多邊形來模擬模糊。

有時它們的用例重疊。就像很多人使用canvas來做簡單的線條圖並在javascript中跟蹤對象作爲數據結構一樣。但實際上，他們都有不同的目的。如果您嘗試在純粹的JavaScript上實現通用矢量繪圖，那麼我懷疑您會比使用最有可能在C中實現的svg更快。

Answer 2

基本上，多虧了畫布，我們現在可以使用HTML5和畫布API繪製/渲染2D圖形。

由於什麼用帆布現在可以一個例子，see this

Answer 3

畫布將使您可以繪製像素完美的圖形。

Answer 4

爲畫布的一些可能的用途：

• 圖片繪圖程序
• 照片編輯/操縱
• 2D遊戲
• 先進的圖像瀏覽，如Microsoft's Deep Zoom

如果你可以」不要理解它是如何有益的，那麼至少從你的角度來看可能不是這樣。不要認爲，因爲它在那裏，我必須以某種方式使用它，根據你正在嘗試構建的內容選擇適合你的技術，會計Web應用程序可能不需要畫布。

Answer 5

來考慮我的酷項目有：

• 可視GPS數據。 GPS數據只是一個XML列表的座標。您可以輕鬆地在畫布上構建「連接點」。
• 一個移動應用程序，用戶可以用她的手指實際簽署文檔 - 畫布允許您將呈現的畫布繪圖導出到PNG，以便將其保存在服務器上。
• 在您擁有頭像的遊戲中，您可以允許用戶實際繪製頭像。鬍鬚人？

其他的東西：

• 在iOS系統/ Android的使用很多CSS3的 效果，如箱陰影可能導致 表現不佳，尤其是當 動畫。您可以在單個畫布標記中執行很多這些 圖形，這裏有一個示例： http://everytimezone.com/。這件事在ipad上完美無瑕。
• 很酷的背景效果。例如嘗試將保羅愛爾蘭的 網站和移動你的光標周圍 背景：http://paulirish.com/
• 在這個HTML5本書由谷歌發起了很多影響使用 帆布： http://www.20thingsilearned.com/ - 特別是「翻頁」 動畫。

Answer 6

我個人拿上粗帆布（當我居然發現畫布用例）是挑選的能力，顏色和canvas元素每個像素的顏色變化 - 實際移動距離的東西，我們沒有像任何有關其內部發生的事情的信息，像所有其他DOM元素（是的，我知道關於當前canvas和DOM的問題 - 肯定這將在未來照顧）

確定 - 帆布製成某種動畫更容易和無插件，但我們以前可以做到（主要是使用閃光燈） - 我認爲真正重要的是能夠知道頁面上發生了什麼。