在HTML畫布元素中將矢量優勢與位圖相結合 - 如何？

我想要做的是創建一個遊戲，在畫布元素上具有極大的縮放能力。我想利用矢量圖形具有的優點，即能夠在運行時以編程方式創建，並具有高性能的位圖圖像。在HTML畫布元素中將矢量優勢與位圖相結合 - 如何？

我想要做的是以編程方式創建遊戲「精靈」的第一幀圖像......這將是一個矢量圖像。雖然在第一幀之後，我不想在繪製圖像時不斷浪費CPU週期，但是我想將它緩存爲該縮放級別的位圖/高性能圖像。

在此之後，如果用戶放大> 20％，則我會用更高級別的細節矢量圖像重新繪製圖像。如上所述，這個矢量圖像將被緩存和優化。

zoomed out

正如你可以在這裏看到，這將是一個非常基本的太空飛船。我會先使其編程作爲載體，然後..光柵它我猜？目標是避免浪費CPU。

如果用戶放大...

zoomed in

相同形狀的一種新的矢量圖像將被繪製，儘管詳細的高得多的水平。這基本上是一個詳細程度系統。在這種情況下，在最初的程序化繪圖之後，我會「光柵化」圖像以獲得最佳性能。

有沒有人有什麼工具我需要做到這一點在HTML畫布內實現的想法？（遊戲的其餘部分將在畫布元素內部運行..）

非常感謝您的想法。

**編輯：我想添加...也許通過SVG（編程）渲染圖像的路線，然後使用drawimage（）將該png文件推入畫布可能會提供一些成功？相似的東西？嗯...

來源

2012-01-19 Mavorus

您不需要轉換爲PNG。大多數瀏覽器都會在'drawImage'中接受一個SVG。 – robertc

這個想法是將最初的框架渲染爲SVG，然後轉換成我們可以重用的PNG。 SVG確實可以直接在瀏覽器中使用，但是如果渲染每一幀，它會產生更大的CPU成本...我知道某些瀏覽器允許SVG圖像的「位圖緩存」，其中最初創建SVG圖像之後，它將被緩存爲位圖，直到大小或alpha發生變化..但是我不知道我對這個緩存有多少控制。而且，與壓縮的PNG相比，BMP圖像是巨大的。想要緩存一個PNG而不是稍後重用。 – Mavorus

我設法回答我自己的問題。

這樣做的方法是首先創建一個SVG文件，然後使用「canvg」將其轉換爲客戶端上的PNG文件。 PNG可以根據您的需求創建不同級別的細節，並以這種方式創建動態LOD系統。

Flash通過兌現SVG文件的位圖圖像自動執行類似操作......它被稱爲「預渲染」。如果SVG未縮放或alpha未更改，則flash將僅使用位圖（速度更快，然後在複雜情況下不斷重新渲染SVG文件）。無論您喜歡如何修改PNG輸出的大小（以及詳細信息），還可以根據事件完成預渲染。

根據這些信息，我決定實施LOD系統，以便在用戶主動縮放（縮放目標「精靈」）時使用SVG，然後在縮放變慢時計算PNG預呈現。另外，在極高的縮放水平下，我只是使用SVG，因爲CPU在高分辨率下計算SVG要容易得多，然後覆蓋大部分屏幕的位圖圖像。（只要看看一些HTML5圖標測試，它會在屏幕上放置大量圖標......圖標越大，運行速度就越慢）。

非常感謝大家在這裏的評論，我希望我的問題/答案能幫助別人。

來源

2012-01-20 01:45:20 Mavorus

看看這篇文章，但它似乎沒有標準的方法來做你想做的事情，它可能會在IE中失敗。

http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/#svg_to_canvas

你或許應該與所有SVG遊戲去，或提供最大的縮放比率，以你的遊戲，用大圖片作爲精靈的資產。這不會是使用閃光燈的問題，但我想你不會用閃光燈。

也許有一個框架可以將SVG轉換爲「畫布繪製序列」，但我不會在這種情況下賭高性能。

來源

2012-01-19 10:49:30 mpm

在HTML畫布元素中將矢量優勢與位圖相結合 - 如何？

回答

相關問題