如何从画布的另一面显示元素的一部分

Question

如何从对面画布显示画布外部的元素部分。插图：

Answer 1

当形状位于画布边界之外时，您需要绘制两次。首先绘制主要部分，然后将相同的部分偏移宽度，这样就可以在另一边显示出幻觉。

手动绘制两次

这将绘制一个从右到左的形状，当形状在左边缘之外时，它将在右边缘重绘，表示左侧不可见的部分。对于相反的方式（从左到右），原理是相同的，只需使用x与canvas'宽度而不是0。

var ctx = document.querySelector("canvas").getContext("2d"),
    x = 100,                                         // start position
    w = 200;                                         // shape width

ctx.fillStyle = "#777";

(function loop() {
  ctx.clearRect(0, 0, 300, 150);                     // clear canvas
  ctx.fillRect(x, 0, w, 150);                        // draw main part/image/shape
  if (x < 0) {                                       // should rotate? draw secondary
    ctx.fillRect(ctx.canvas.width + x, 0, w, 150);   // use canvas width + x (x<0)
  }

  x -= 7;                                            // animate
  if (x <= -w) x = ctx.canvas.width + x;             // at some point reset x

  requestAnimationFrame(loop)
})();

<canvas></canvas>

翻译模式

为了简化这一点，可以使用CanvasPattern。更高版本的画布允许对图案本身进行局部变换，但由于目前这种变换并未广泛传播，因此我将展示使用正常变换和补偿x位置的示例：

var ctx = document.querySelector("canvas").getContext("2d"),
    pattern,
    x = 100,                                         // start position
    w = 200;                                         // shape width

// create pattern
ctx.fillStyle = "#777";
ctx.fillRect(x, 0, w, 150);                          // draw main part/image/shape
pattern = ctx.createPattern(ctx.canvas, "repeat");   // use current canvas as pattern
ctx.fillStyle = pattern;                             // set pattern as fillStyle

(function loop() {
  ctx.setTransform(1,0,0,1,0,0);                     // reset transforms
  ctx.clearRect(0, 0, 300, 150);                     // clear canvas
  ctx.setTransform(1,0,0,1,x,0);                     // translate absolute x
  ctx.fillRect(-x, 0, 300, 150);                     // fill using pattern, compensate transform
  x -= 7;                                            // animate

  requestAnimationFrame(loop)
})();

<canvas></canvas>