在 HTML 画布元素中结合矢量优势和位图 - 如何？答案

【问题标题】：Combine Vector advantages with Bitmap in an HTML canvas element - how?在 HTML 画布元素中结合矢量优势和位图 - 如何？
【发布时间】：2012-02-13 18:04:15
【问题描述】：

我要做的是创建一个在画布元素上具有极大缩放能力的游戏。我想利用矢量图的优势，即能够在运行时以编程方式创建，以及位图图像的高性能。

我想做的是以编程方式创建游戏“精灵”的第一帧图像......这将是一个矢量图像。不过，在第一帧之后，我不想继续浪费 CPU 周期来绘制图像。我想将其缓存为该缩放级别的位图/高性能图像。

在此之后，如果用户放大 >20%，我会用更高级别的细节矢量图像重新绘制图像。如上，这个矢量图会被缓存和优化。

正如您在此处看到的，这将是一艘非常基本的太空船。我会首先以编程方式将其渲染为矢量，然后.. 栅格化我猜？目标是避免浪费 CPU。

如果用户放大...

将绘制一个相同形状的新矢量图像，尽管具有更高级别的细节。这基本上是一个细节级别系统。同样在这种情况下，在初始编程绘制之后，我会“光栅化”图像以获得最佳性能。

有没有人知道我需要哪些工具才能在 HTML 画布中实现这一点？（游戏的其余部分将在画布元素内运行..）

非常感谢您的想法。

**编辑：我想添加...也许通过SVG（以编程方式）渲染图像，然后使用drawimage（）将该png文件推送到画布中，可能会取得一些成功？相似的东西？嗯……

【问题讨论】：

您不需要转换为 PNG。大多数浏览器将接受 drawImage 中的 SVG。
这个想法是将初始帧渲染为 SVG，然后转换为我们可以重用的 PNG。 SVG 确实可以直接在浏览器中使用，但是如果每帧都渲染它会产生更大的 CPU 成本……我知道有些浏览器允许对 SVG 图像进行“位图缓存”，然后最初创建 SVG 图像，它将被缓存为位图，直到大小或 alpha 发生变化。但是我不确定我对此缓存有多少控制权。此外，与压缩的 PNG 相比，BMP 图像非常庞大。想要缓存一个 PNG 以供以后重用。

标签： javascript html graphics svg

【解决方案1】：

查看那篇文章，但似乎没有标准方法来做你想做的事，它可能在 IE 中失败。

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

您或许应该使用全 SVG 游戏，或者为您的游戏提供最大缩放率并使用大图像作为精灵资源。用flash应该没问题，但我猜你也不会用flash。

也许有一个框架可以将 SVG 转换为“画布绘制序列”，但在这种情况下我不会押注高性能。

【讨论】：

【解决方案2】：

我设法回答了我自己的问题。

这样做的方法是首先创建一个 SVG 文件，然后在客户端使用“canvg”将其转换为 PNG 文件。可以根据您的需要在不同的细节级别创建 PNG，这样您就可以创建一个动态的 LOD 系统。

Flash 通过兑现 SVG 文件的位图图像自动执行类似的操作……这称为“预渲染”。如果 SVG 未缩放或 alpha 未更改，flash 将只使用位图（在复杂情况下比连续重新渲染 SVG 文件要快得多）。 PNG 输出的大小（以及细节）可以随意修改，因此也可以根据事件进行预渲染。

根据这些信息，我决定实现 LOD 系统，以便在用户主动缩放（缩放目标“精灵”）时使用 SVG，然后随着缩放速度减慢，计算 PNG 预渲染。此外，在极高的缩放级别下，我只使用 SVG，因为 CPU 更容易计算高分辨率的 SVG，然后是覆盖大部分屏幕的位图图像。（看看一些在屏幕上放置大量图标的 HTML5 图标测试......图标越大，运行速度越慢）。

在这里非常感谢大家的cmets，希望我的问题/回答对大家有所帮助。

【讨论】：