代码之家  ›  专栏  ›  技术社区  ›  Chris

HTML5画布动画问题

  •  1
  • Chris  · 技术社区  · 12 年前

    我正在试验HTML5画布,试图创建一些动画。我的最终目标是能够随心所欲地将一个盒子动画化到特定的位置,现在我只是在屏幕上动画化它。当我在屏幕上移动它时,我会留下一条黑色的痕迹,如何在不删除背景网格的情况下清除这个“脏”部分?

    代码的jsFiddle是 here

    2 回复  |  直到 12 年前
        1
  •  3
  •   Mikko Ohtamaa    12 年前

    两种解决方案

    • 在将动画移动到新位置之前,在动画顶部重新绘制背景。这种所谓的脏精灵技术——更快——更复杂。

    • 在框架之间重新绘制整个画布

    如果绘制背景是一项复杂的操作,只需将准备好的背景缓冲在另一个画布中即可。

        2
  •  1
  •   Nikola Radosavljević    12 年前

    如果你不想让它被看到,你必须清除你画的东西。我认为您不想为了避免重新绘制网格和花费CPU周期而清除整个画布。你必须采取不同的做法。

    可能的解决方案:

    • 有两个相同的屏幕画布,一个在另一个上面。在下面的画布上绘制网格,不要清除它。清除顶部画布的一部分,然后在上面重新绘制。
    • 有一个屏幕上和一个屏幕外的画布。在屏幕外画布上绘制网格。每次制作动画时,清除整个屏幕画布,从另一个画布复制准备好的网格,并在上面绘制所需内容。