性能：Html5 Canvas / Javascript - 使用 canvas.drawImage 与 canvas.style 移动背景图像答案

【问题标题】：Performance: Html5 Canvas / Javascript - Moving the background image using canvas.drawImage vs canvas.style性能：Html5 Canvas / Javascript - 使用 canvas.drawImage 与 canvas.style 移动背景图像
【发布时间】：2020-12-07 15:45:32
【问题描述】：

我有一个基于position 向上、向下、向左和向右滚动的背景，我想知道每次position 更改时使用drawImage() 与仅绘制整个背景是否有任何显着的性能差异一次并使用canvas.style移动画布

使用 canvas.drawImage()

//cut piece and draw image to fill canvas every time position changes
canvas.drawImage(backgroundImg, 0 + positionX, 0 + positionY, c.width, c.height, 0, 0, c.width, c.height);

使用 canvas.style

canvas.width  = widthofbackgroundImg;
canvas.height = heightofbackgroundImg;

//draw entire background only once
canvas.drawImage(backgroundImg, 0, 0, widthofbackgroundImg, heightofbackgroundImg);

..那么

//move the entire canvas on every position change
canvas.style.left = positionX;
canvas.style.up   = positionY;

【问题讨论】：

标签： javascript html css canvas

【解决方案1】：

这是两种不同的方法，取决于浏览器的处理方式（不同的浏览器可能会在渲染中设置不同的优先级）。当然，将画布图像移动drawImage 是没有意义的，如果没有其他变化并且只是初始绘制。我建议您不要使用canvas.style.left 和canvas.style.right，而是使用transform = translate3d(x, y, 0) 并使用您的开发工具测试性能改进。这将通过 GPU 渲染并可能提高速度。它将防止回流，这通常是耗时的。此外，交替读取和写入 DOM 可能会降低性能。这将有助于首先进行所有读取（获取位置、滚动位置等），将其保存在变量中，然后写入所有内容。

【讨论】：

有趣.. 我会试一试。如果我看到性能提升，我会接受你的回答