Question

我有<canvas></canvas>有几张图片＆amp;填写/绘制文本。现在我想通过更改它的偏移量在整个画布上应用滑入效果。

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

我知道通过重绘每个元素并改变它们的偏移量是可能的。但由于它在画布中绘制了许多元素，因此我试图避免产生过多的代码来移动每个元素。相反，我想使用以下方式移动画布：

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

如果我要更改<canvas>顶部＆amp;左坐标这样做，会硬件加速吗？

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

如果我改变顶部＆amp;左坐标这样做，会不会硬件加速？

是的，但必须在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，这将是一个更好的代码。相反，因为有很多元素可以一次移动。

HTML5画布：重绘整个上下文

2 个答案: