将画布内容移到左侧

Question

是否有一种简单的方法可以将画布内容向左移动，丢弃最左边的像素并将所有其他像素移到左边？

Answer 1

使用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);

Answer 2

查看使用ctx.translate和ctx.get/putImageData的{​​{3}}。

jsFiddle example

如何完成：

如果重新绘制想要移动的内容并不太慢，source code here值得使用。

如果您只想移动画布的当前内容而不重绘，

get/putImageData也会起作用。这不是没有缺点;它必须复制正在移动的像素区域，如果从画布上的外部域中绘制任何图像，则无法使用它：

  

每当使用其他正确的参数调用其origin-clean标志设置为false的canvas元素的2D上下文的getImageData（）方法时，该方法必须抛出SecurityError异常。

如果jsFiddle失败，请输入以下代码：

HTML：

<a href="javascript:doIt()">shift 25 pixels to the left using `translate`</a><br>
<a href="javascript:shiftImage()">shift 25 pixels to the left using `getImageData/putImageData`</a><br>
<canvas id="canvas" width="600" height="200"></canvas>

JS：

var canvas = document.getElementById( "canvas" ),
    ctx = canvas.getContext( "2d" );

var xOff = 0;
var redraw = function() {
        ctx.clearRect(0, 0, 600, 200);
        ctx.save();
        ctx.translate(xOff, 0);

        ctx.font = "100px Arial";
        ctx.fillText( "Google", 20, 130 );

        ctx.restore();
};

window.doIt = function() {
    xOff -= 25;
    redraw();
}

redraw();

var shiftContext = function(ctx, w, h, dx, dy) {
  var clamp = function(high, value) { return Math.max(0, Math.min(high, value)); };
  var imageData = ctx.getImageData(clamp(w, -dx), clamp(h, -dy), clamp(w, w-dx), clamp(h, h-dy));
  ctx.clearRect(0, 0, w, h);
  ctx.putImageData(imageData, 0, 0);
}

window.shiftImage = function() {
  shiftContext(ctx, 600, 200, -25, 0);   
}


var shiftContext = function(ctx, w, h, dx, dy) {
  var clamp = function(high, value) { return Math.max(0, Math.min(high, value)); };
  var imageData = ctx.getImageData(clamp(w, -dx), clamp(h, -dy), clamp(w, w-dx), clamp(h, h-dy));
  ctx.clearRect(0, 0, w, h);
  ctx.putImageData(imageData, 0, 0);
};

window.shiftImage = function() {
  shiftContext(ctx, 600, 200, -25, 0);   
};

Answer 3

完美的家伙，谢谢。这是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);
}

Answer 4

如果要移动整个内容，可以使用带有单个drawImage（）的复制全局复合操作，在自身上绘制画布。似乎没有在safari中工作，但它在chrome中很快疯狂。

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

Answer 5

我碰巧想知道是否有方便的方法来做到这一点。我最终想出了这个翻译功能，它不需要任何（非常慢的）图像数据功能：

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
}

我快速演示了它here。