【发布时间】：2015-12-26 09:26:09
【问题描述】：
我想在画布底部绘制一个重复的草图案。图像确实重复，但它是垂直移动的。
图案基于 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);
}
【问题讨论】：
标签： javascript html image canvas graphics