Canvas vs CSS Transformations

Question

我想知道是否應該在我的HTML5 canvas遊戲中實現CSS3轉換或畫布轉換（旋轉，傾斜，縮放......現在主要是2D）。
我打算將它用於android上的chrome。
我找不到任何明確的答案。
各自的性能收益和總體利弊分別是什麼？

Answer 1

這取決於目的。

如果使用CSS3轉換，它將僅影響畫布元素而不是其內容（位圖），而使用畫布自己的轉換會影響內容。

另一個區別是，CSS3轉換會影響畫布及其當前位圖總而言之，沒有區別。使用畫布上下文的局部變換，可以更改每個畫圖之間的變換矩陣，以影響不同形狀的不同方式。

如果您不需要對畫布中的不同形狀進行單獨轉換，並且無需提取分析/操作轉換內容的像素，那麼CSS3可能是更好的選擇。

我相信瀏覽器共享相同的轉換過程（在覈心），所以性能本身沒有什麼不同（理論上）。使用canvas的本地轉換仍然存在性能問題，但是由於JavaScript本身，而CSS3轉換在本地編譯代碼內部調用。

與爲每個所需轉換設置CSS規則相比，Canvas可以爲您提供更好，更簡單的細節控制。

使用畫布轉換的一個缺點是讀取例如相對於元素而不是轉換位圖的鼠標位置。這意味着您需要使用逆矩陣來彌補這一點。你可以通過使用絕對變換而不是累積的變換來解決這個問題，你可以爲每個幀更新設置和重置。

我的推薦：對於遊戲使用畫布通常更好。您可以使用CSS製作更簡單的遊戲，但我會爲這些東西推薦畫布。

（免責聲明：我認爲在我的答案中，你是一個畫布的意義內容，而不是一般意義上的）。