支持CSS3轉換的HTML形狀（最好使用DIV）

Question

我打算製作一款遊戲，記住一切。我很瞭解HTML，CSS和Javascript，它會給我跨瀏覽器支持，所以一定要使用它。

我有需要，我需要顯示一個div（矩形），然後在一些動作以動畫其他形狀，你可以在這個picture

更好看，我可以動畫DIV元素或者我需要否則使用SVG或Canvas？

Answer 1

爲了在瀏覽器中繪製任意形狀，我建議使用Canvas或SVG。

我會避免試圖'使用HTML <div>元素和CSS'繪圖'。這是可能的，但它最好是黑客攻擊，可能會變得非常混亂，我當然不想用這種技術編寫遊戲。

所以你最好的選擇絕對是SVG或Canvas。

SVG vs Canvas的選擇取決於您希望支持哪些平臺/瀏覽器，因爲它在這兩種技術的屬性上有所不同。

很明顯，您已經知道SVG（矢量圖形）和Canvas（像素圖形）之間的主要區別，但是它們也有不同的瀏覽器支持，這一點很重要。

由於您提供的信息有限，所以我會說SVG看起來像是最適合您正在做的事情。但是，Android瀏覽器尚不支持SVG，所以如果您希望您的遊戲在移動設備上運行，則需要考慮這一點。這可能意味着你需要使用Canvas來代替。

如果您堅持桌面，所有現代瀏覽器都支持Canvas和SVG。很顯然，IE8和更早版本都缺少這兩個版本，但IE確實支持一種稱爲VML的競爭格式，它是一種類似於SVG的基於XML的矢量語言。

如果你想支持IE8（而且很有可能你不需要！），那麼IE的javascript庫可用，它將使用IE的VML引擎渲染Canvas和SVG圖形。顯然這對SVG非常有效，因爲兩種語言非常相似。我聽說稍微有些關於畫布轉換的混雜報道，但您可能想嘗試一下。請記住，IE8的Javascript引擎速度很慢，因此基於JavaScript的圖形格式轉換可能無法讓您在遊戲環境中有足夠的性能。

希望有所幫助。