如何在 html5 Canvas 中有效地上下和左右滚动和循环纹理的红色组件？

Question

 <code>
 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 var img1 = new Image();
//drawing of the test image - img1
img1.onload = function () {
    //draw background image
    ctx.drawImage(img1, 0, 280);
};
img1.src = 'grass60.png';
var imgData = ctx.createImageData(521, 280);
var i;
var count=0
for (i = 0 ; i < imgData.data.length;i+=4) {
imgData.data[i] = imgData.data[i+2084%583520];
imgData.data[i+1] = imgData.data[i+1%583520];
imgData.data[i+2] = imgData.data[i+2%583520];
imgData.data[i+3] = 255;
}
ctx.putImageData(imgData,0, 0);
//or
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img1 = new Image();
//drawing of the test image - img1
img1.onload = function () {
    //draw background image
    ctx.drawImage(img1, 0, 0);
};
img1.src = 'grass60.png';
//Code below that produces black screen
var imgData = ctx.createImageData(521, 280);
var i;
var DB = new Uint8Array(256);
for (var qq=0;qq<256;qq++){
DB[qq]=qq;
}
var count=0
for (i = 0 ; i < imgData.data.length;i+=4) {
imgData.data[i] = imgData.data[(i+2048)%583520]
imgData.data[i+1] = imgData.data[(i+1)%583520]
imgData.data[i+2] = imgData.data[(i+2)%583520]
imgData.data[i+3] = 255;
}
ctx.putImageData(imgData,0, 280);
</code>

这不会只绘制全黑或什么都不画的图像。上面的代码不起作用无法访问图像不知道为什么草只是一个图像，里面有一些更红的元素。代码是更改图像数据，但它只是创建一个空白屏幕

Answer 1

"为什么它会创建一个空白屏幕？"问题的答案是你在加载img1之前读取img1的数据。几乎所有代码都应该在加载中。

您遇到的其他问题：

• 您正在创建一个充满 0 的全新空 ImageData，然后在自身内部复制其数据。(我是通过向 for 循环中添加console.log(imgData.data.slice(i, i+4));来发现这一点的。这也将为您提供空白屏幕。您需要使用类似

  var oldImageData = ctx.getImageData(0, 280, 521, 280);
  

将
• 红色像素向下移动到2084年将几乎不明显 - 顶部一条一个像素宽的线。尝试 20840，以便您可以看到效果。

• 如果您使用imgData.length或var bytes = img.width * img.height * 4;而不是"幻数"583520，则此代码会更清晰。无论如何，它不需要;这工作得很好：

  newImageData.data[i+20840] = oldImageData.data[i];

编辑：这是一个有效的JSFiddle，现在我得到了一个base64图像来使用。