Question

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

如果我有最终图像，我可以清除画布并再次在“＆＃39; y＆＃39;坐标是否定的，这将起作用。问题是调用toDataUrl（）以获取最终图像 - 非常耗费CPU。

任何其他方式来实现这一目标？为什么我不能告诉画布上下移动所有内容＆＃39;按x像素......？

谢谢！

Answer 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)
}

<canvas width=200 height=200></canvas>

Answer 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）将图片数据放到您想要的位置。

修改

Kaido的解决方案是更好的选择。

参考

Why is putImageData so slow?

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

2 个答案: