HTML5 canvas：重绘整个上下文

Question

我有这个<canvas></canvas> ，上面有一些图片和文字。 现在，我想通过更改其偏移量在整个画布上应用滑入效果 。

像重新绘制偏移量（0，-10）上的所有内容。

我知道可以通过重绘每个元素并更改其偏移量来实现。 但是由于画布中包含许多元素，因此我试图避免产生过多的代码来移动每个元素。 相反，我想使用以下方法将画布整体移动：

context.save();
context.moveTo(-10,0);
context.translate(-10,-10);
context.restore();

如果要更改<canvas>顶部和左侧坐标，是否可以通过硬件加速？

Answer 1

你有没有尝试过：

 $("canvas").animate({
       left: 0px //Just an example
 }, "slow");

上面的例子需要jQuery

Answer 2

来自http://www.urbaninsight.com/2013/01/04/improving-html5-app-performance-gpu-accelerated-css-transitions

如果要更改顶部和左侧坐标，是否可以通过硬件加速？

是的，但是必须在CSS3上进行设置：

.accelerated {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s ;
}

好吧，尽管可以使用javascript for（）更改偏移量来完成此过程，但我认为如果使用CSS3 HW Acc，它将是更好的代码。 相反，因为有许多元素可以一次移动。