画布标签 - drawarc 与图像答案

【问题标题】：Canvas tag - drawarc vs image画布标签 - drawarc 与图像
【发布时间】：2011-11-02 16:14:47
【问题描述】：

我已经实现了一个 canvas 元素，它使用 drawarc 来创建气泡在背景上以不同速度上升的效果（这是一个水下主题客户的水下主题网站） - 它看起来非常好，我很漂亮对此感到满意，但我注意到某些浏览器（特别是 IE9）中存在轻微的性能问题。

我正在使用 drawarc 绘制气泡以创建半透明的圆圈 - 谁能告诉我将图像/精灵印在画布上是否或多或少（就客户端性能而言）？

-迈克

【问题讨论】：

标签： performance html canvas

【解决方案1】：

绘制圆弧/圆比绘制图像要昂贵得多。绘制图像很可能是将任何东西绘制到画布上的最有效方法。我在这个主题上写了我的Bachelor Thesis。它是德语的，但基本上在使用 arc 和 arcTo 绘制圆弧时，在 IE9 中的操作/秒少于 15.000。绘制图像时，每秒可进行超过 160.000 次操作。

【讨论】：

谢谢哥们，现在就试试这个。
好的 - 我用图像而不是弧线来实现它，并且确实看到 IE9 性能略有提高（不是负载，但是我在这里所做的并不是那么密集，我相信图像方法会更好地扩展）。
您可以通过仅重新绘制实际更改的画布部分来加快画布绘制速度。您可以通过在清除和重新绘制矩形之前使用剪辑设置剪辑区域来做到这一点。此外，您可以对剪切区域进行可见性剔除，以仅在位于脏矩形内的那些项目上实际调用绘画方法。这些是加速图形绘制的众所周知的技术。不过，它们可能不适用于您的情况。此外，如果您遇到性能问题，请对其进行分析并找出您的实际瓶颈。
我发现多个具有透明背景的超载画布以及 context.clearRect(x,y,w,h) 最有效。例如，在 Pacman 中，我有静态元素，例如底部画布上的迷宫，中间一层供 Pacman 吃的药丸，以及顶层动态精灵：这允许幽灵精灵在不需要药丸的情况下移动用于重绘，Pacman 吃掉一个后可以 clearRect()。
@DanielBaulig，链接已损坏。