如何在 HTML5 画布上移动绘制的图像？答案

【问题标题】：How to move a drawn image on HTML5 canvas?如何在 HTML5 画布上移动绘制的图像？
【发布时间】：2015-12-03 18:35:11
【问题描述】：

假设我有一个 HTML5 画布，我已经在上面绘制了多个图像，并且我没有“手头”最终生成的图像，现在我想将画布中的整个图像向上移动？（就像用户选择“向下滚动”图像一样）

如果我有最终图像，我可以清除画布并在“y”坐标中再次绘制它，这是负数，这会起作用。问题是调用 toDataUrl() 以获取最终图像 - 非常消耗 CPU。

还有其他方法可以实现吗？为什么我不能只告诉画布将所有内容“向上/向下移动”x 个像素...？

谢谢！

【问题讨论】：

标签： javascript html image canvas

【解决方案1】：

Canvas drawImage() 方法接受另一个画布作为源。
您也可以在画布本身上绘制，但在每次迭代中，您的图像将已改变。

所以最简单的方法是创建另一个画布，它将保留您的实际画布图像，并将这个新画布绘制到文档中的那个：

var canvas = document.querySelector('canvas'),
  ctx = canvas.getContext('2d'),
  img = new Image(),
  // a ghost canvas that will keep our original image
  gCanvas = document.createElement('canvas'),
  gCtx = gCanvas.getContext('2d');
gCanvas.width = canvas.width;
gCanvas.height = canvas.height;


img.onload = function() {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  gCtx.drawImage(canvas, 0, 0, canvas.width, canvas.height);
  requestAnimationFrame(moveUp);
}
img.src = "http://lorempixel.com/200/200";

var y = 0;
function moveUp() {
  if (--y < (canvas.height * -0.5)) return;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(gCanvas, 0, y, canvas.width, canvas.height);
  requestAnimationFrame(moveUp)
}

&lt;canvas width=200 height=200&gt;&lt;/canvas&gt;

【讨论】：

不知道 draw 可以接受画布本身作为参数。那成功了！非常感谢！
是的，它可以，但是这样就很难得到你正在画的东西，因为每次你这样做时，绘制的图像都会更新为最后一次绘制......更容易保持另一个画布，上面绘制了我们想要的状态。
@AmitKanfer 如果它解决了您的问题，请记住通过左侧的检查“接受答案”，这样其他回答者就不会在他们的“应该回答”列表中看到这个问题"

【解决方案2】：

您可以使用ctx.getImageData (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData) 获取图像数据，并使用ctx.putImageData (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData) 将图像数据放在您想要的位置。

编辑

不过，凯多的解决方案是更好的选择。

参考

Why is putImageData so slow?

【讨论】：

我认为它至少和 toDataURL 一样消耗，不是吗？
toDataURL 将其转换为字符串。这个没有。好的部分是，一旦您获得了第一步中的数据，您就可以多次重复使用它，而无需再次执行 getImageData。
第二部分没问题，但是第一部分……它确实将它转换为一个数组，然后遍历这个数组以重绘……没有 GPU 加速。
对不起，我对GPU加速部分的了解不够。但我进行了快速测试，getImageData 比 toDataURL 稍有优势。虽然有点...
知道了——你做的是最好的stackoverflow.com/questions/3952856/why-is-putimagedata-so-slow