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

How to move a drawn image on HTML5 canvas?

本文关键字：移动 绘制 图像 HTML5      更新时间：2023-09-26

假设我有一个HTML5画布，我已经绘制了多个图像，我没有最终的结果图像"在手"，现在我想在画布上移动整个图像?(就像用户选择向下滚动图像一样)

如果我有最终的图像，我可以清除画布并在"y"坐标上再次绘制它，这是负的，这将工作。问题是调用toDataUrl()来获得最终的图像是非常消耗CPU的。

还有其他方法吗?为什么我不能告诉画布"上下移动"x像素…?

谢谢!

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>

您可以使用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)将图像数据放在您想要的位置。

编辑

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

参考

为什么putImageData这么慢?

相关文章：