Html5 canvas 将画布内容向左移动

有没有一种简单的方法可以将画布内容向左移动，删除最左边的像素并将所有其他像素向左移动？

使用

getImageData

和

putImageData

可以轻松实现逐像素移动。例如：

// shift everything to the left:
var imageData = context.getImageData(1, 0, context.canvas.width-1, context.canvas.height);
context.putImageData(imageData, 0, 0);
// now clear the right-most pixels:
context.clearRect(context.canvas.width-1, 0, 1, context.canvas.height);

查看这个使用

ctx.translate

和

ctx.get/putImageData

的文件。 如何做到： 如果重新绘制要移动的内容不是太慢，则值得使用

如果您只想在不重新绘制的情况下移动画布的当前内容，

get/putImageData

也将起作用。这并非没有缺点；它必须复制正在移动的像素区域，如果您在画布上从外部域绘制任何图像，则无法使用它：

当使用正确的参数调用其原始清除标志设置为false的canvas元素的2D上下文的getImageData（）方法时，该方法必须抛出SecurityError异常

如果JSFIDLE失败，代码如下： HTML:

---

很好，谢谢。以下是ellisbben代码的简化版本，适用于我构建的一些滚动图形：

function shift_canvas(ctx, w, h, dx, dy) {
  var imageData = ctx.getImageData(0, 0, w, h);
  ctx.clearRect(0, 0, w, h);
  ctx.putImageData(imageData, dx, dy);
}

---

我碰巧想知道是否有一个方便的方法来做这件事。我最终提出了这个translate函数，它不需要任何（非常慢的）图像数据函数：

function translate(x, y) {
    ctxBuffer.clearRect(0,0,canvasBuffer.width,canvasBuffer.height); //clear buffer
    ctxBuffer.drawImage(canvasDisplay,0,0); //store display data in buffer
    ctxDisplay.clearRect(0,0,canvasDisplay.width,canvasDisplay.height); //clear display
    ctxDisplay.drawImage(canvasBuffer,x,y); //copy buffer to display
}

---

我已经对它做了一个快速演示。

如果你想移动整个内容，你可以使用一个复制全局合成操作和一个drawImage（），在画布上自己绘制。在safari中似乎不起作用，但在chrome中速度非常快

ctx.globalCompositeOperation = "copy";
ctx.drawImage(ctx.canvas,-widthOfMove, 0);
// reset back to normal for subsequent operations.
ctx.globalCompositeOperation = "source-over"

---

不，我的意思是扔掉它们（就像“它们现在越过了左边的边界，扔掉它们”）。但是是的，这看起来不错。哦，我明白了，我在考虑最右边的像素。我将从答案中删除这句话。谢谢你的回答。非常有用。作为清除这一列像素的clearRect（）行的替代方法，您可以将context.clearRect（0，0，context.canvas.width，context.canvas.height）放在getImageData（）之后和putImageData（）之前。这样做的好处是，您可以在任何方向上移动任意数量的图像，而不必担心要清除哪个矩形。“如果您可以重新绘制要移动的内容，您应该使用画布变换方法。”-为什么？我想，根据我的代码，这可能真的很慢。“这不太理想，因为如果您在画布上从外部域绘制任何图像，就无法使用它”——这是一个值得关注的问题，但这不是我正在做的。另外，我想你可以通过JSONP传输图像来解决这个问题；我想它应该说“如果你想移动的重绘不是太慢。”同时，

getImage

实际上复制了指定图像区域中的所有像素；一个是否比另一个快将取决于所绘制图像的复杂性和区域的大小。这比

getImageData（）

/

putImageData（）快得多，但是为了获得最佳效果，您可能需要设置
ctx.imageSmoothingEnabled=false
，以防止对复制的图像数据进行抗锯齿处理。这要快得多。只需记住在绘制之前将变换设置回默认值，这样可以节省您思考为什么变换不起作用的时间！
function translate(x, y) {
    ctxBuffer.clearRect(0,0,canvasBuffer.width,canvasBuffer.height); //clear buffer
    ctxBuffer.drawImage(canvasDisplay,0,0); //store display data in buffer
    ctxDisplay.clearRect(0,0,canvasDisplay.width,canvasDisplay.height); //clear display
    ctxDisplay.drawImage(canvasBuffer,x,y); //copy buffer to display
}

ctx.globalCompositeOperation = "copy";
ctx.drawImage(ctx.canvas,-widthOfMove, 0);
// reset back to normal for subsequent operations.
ctx.globalCompositeOperation = "source-over"