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，它將是更好的代碼。 相反，因為有許多元素可以一次移動。