在遊戲中使用畫布的真正好處是什麼？

Question

我正在閱讀畫布，但我發現很難找到使用畫布的實際好處，當使用簡單的CSS疊加/ JavaScript（+ jquery lib）可以完成很多事情時。

這可能是因爲我不知道使用畫布的全部實用性。

縱觀本場比賽： http://www.pirateslovedaisies.com/

有人能幫助解釋如何以及爲什麼被使用的畫布，而不是僅僅CSS？

Answer 1

This是我寫的一個4k js/canvas演示，用於試驗2d上下文（如果瀏覽器不工作，則爲here是視頻）。我僅在Chrome，Opera，Firefox，Safari和Nexus One瀏覽器上測試過它。

注意，沒有外部資源被加載（即，紋理和光線跟蹤envmap動態編譯），所以這只是一個單一的自包含4096個字節的HTML文件。

你可以用DIV做類似的事情嗎？

但的確我同意你連接IMO的遊戲也可以用DIV來完成;顯然沒有任何變化 - 即使在雛菊裝載場景中也沒有 - 並且海盜的行動區域只是圓圈。不知道，但可能是即使拍攝只發生在固定的角度。

畫布可以被用來代替用於：

• 繪製一般傾斜線和多邊形（地圖可以從dinamically緊湊描述創建或可能已被隨機地產生）。拍攝可在任何角度完成...
• 程序圖像創建（例如紋理或特殊像素效應）
• 梯度，紋理映射
• 使用一般的2D矩陣變換

當然遊戲圖像+ DIVs方法可能更容易製作（很多photoshop和簡單的xy動畫）。

Answer 2

創建大量的HTML元素非常緩慢且需要內存。畫布對象是爲圖形操作而製作的，因此對其進行了優化。除此之外，你將如何繪製純HTML/CSS的曲線？ ;）

Answer 3

使用<canvas>你的屏幕上顯示什麼是一個每個像素控制。您不必處理特定的瀏覽器CSS或DOM兼容性。另外，這實際上是一個非2D類似非編程遊戲的編程模型，就像那些使用SDL或DirectDraw創建的編程模型。

Answer 4

下面是使用Canvas幾個小時a game I wrote;請注意，瓷磚的縮放比例，線條的抗鋸齒效果非常好。對於被瀏覽器調整大小的圖片，情況並非如此。

單擊瓷磚旋轉它們以嘗試進行所有連接。點擊頂部的一排按鈕以獲得不同尺寸的新電路板;單擊具有不同連接數的新電路板下方的按鈕行。

遊戲概念不是我的，只是實現。