将画布内容移到左侧

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

如果您想移动整个内容，您可以使用带有单个 drawImage() 的复制全局复合操作，在其自身上绘制画布。在 safari 中似乎不起作用，但在 chrome 中速度非常快。

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

Answer 3

看看这个使用和的jsFiddle示例.ctx.translatectx.get/putImageData

源代码在这里

怎么做的:

如果重绘你想要移动的东西不是太慢,画布变换方法是值得使用的.

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 4

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