javascript - 在 Canvas 的底部边缘绘画时，图案会移位

我想在画布的底部画一个重复的草图案。图像确实重复，但它是垂直移动的。
该图案基于192x50图像：

我注意到，如果从y坐标50、100、150等绘制，则模式将正确显示。它在其他坐标系不起作用。
生成的画布具有垂直移动的草地图案：

我不知道为什么它会这样移动。
下面是我的代码。
HTML格式：

<canvas id="myCanvas" style="display: block;">
</canvas>

JavaScript代码：

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
// Grass Background Image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
    bgReady = true;
};
bgImage.src = "img/grass.png";

我循环执行以下操作：

if (bgReady) {
        ctx.drawImage(bgImage,0, canvas.height -50,192,50);
        var ptrn = ctx.createPattern(bgImage, "repeat"); // Create a pattern with this image, and set it to repeat".
        ctx.fillStyle = ptrn;
        ctx.fillRect(0,canvas.height - bgImage.height,canvas.width, 50); // context.fillRect(x, y, width, height);
    }

最佳答案

问题是，模式是从画布的左上角开始计算的。如果从不是图像高度整数倍的画布y坐标开始绘制，则图案的可见部分不会从图像的顶部开始。
要解决此问题，请在使用图案进行绘制之前向下移动绘图上下文，然后在向上移动的位置绘制图案，然后向上移动上下文：

  var shiftY = canvas.height % image.height;
  context.translate(0, shiftY);
  context.fillRect(0, canvas.height - image.height - shiftY,
                   canvas.width, image.height);
  context.translate(0, -shiftY);

运行下面的代码片段以查看演示。画布高度是120，这意味着我们从y坐标120-50=70开始绘制，这不是50的倍数。
为了纠正这个错误，我们将上下文下移120%50=20，然后将绘制位置上移20。因此，模式在y坐标（70-20）=50（图像高度的倍数）的移位上下文上绘制。

var canvas = document.getElementById('myCanvas'),
    context = canvas.getContext('2d');
canvas.height = 120;
canvas.width = 500;

var image = new Image();
image.src = 'http://i.stack.imgur.com/2bfPb.png';
image.onload = function () {
  var pattern = context.createPattern(image, "repeat");
  context.fillStyle = pattern;
  var shiftY = canvas.height % image.height;
  context.translate(0, shiftY);
  context.fillRect(0, canvas.height - image.height - shiftY,
                   canvas.width, image.height);
  context.translate(0, -shiftY);
};

#myCanvas {
  border: 1px solid #666;
}

<canvas id="myCanvas"></canvas>

让我再做一次观察。代码中的循环效率低下，而且不需要bgReady标志，因为您可以在image.onload函数中运行绘制代码，就像我在代码片段中所做的那样。

关于javascript - 在 Canvas 的底部边缘绘画时，图案会移位，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34467244/