Javascript HTML5画布：重新绘制整个上下文

我有这个

，里面填充了一些图片和文字。 现在我想通过更改偏移量在整个画布上应用一个有效的幻灯片

类似于重新绘制偏移量（0，-10）上的所有内容

我知道通过重新绘制每个元素并更改其偏移量是可能的。但是，由于它在画布中绘制了许多元素，因此我试图避免生成过多的代码来移动每个元素。相反，我希望使用以下方法将画布作为一个整体移动：

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

如果我要更改顶部和左侧坐标，它会被硬件加速吗？

您尝试过：

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

上面的示例需要jquery

如果我改变左上角的坐标，会吗 硬件加速

可以，但必须在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 ;
}

---

好的，尽管可以使用javascriptfor（）来更改偏移量，但我认为如果使用CSS3 HW Acc将是一个更好的代码，因为有许多元素需要一次移动。

不使用jquery。感谢Thought不幸的是，CSS3动画在IE FF和CR上的表现不同。必须编写JS才能正常工作。