JavaScript Canvas ，手动将 Canvas 克隆到另一个 Canvas 上会生成奇怪的图案

Question

我正在尝试制作类似于 this article 底部的效果的文本效果

我建议的方法是:

1. 制作两个 Canvas ，一个是可见的，另一个是不可见的我用它作为缓冲区。
2. 在缓冲区 Canvas 上绘制一些文本
3. 遍历 getImageData 像素
4. 如果像素 alpha 不等于零(当在 Canvas 缓冲区上绘制了一个像素时)并且有很小的机会(即 2%)，则在可见 Canvas 上的该像素处绘制一个随机生成的具有酷效果的圆圈。<

我在第 4 步遇到了问题。使用下面的代码，我试图在第二个 Canvas 上复制全红色的文本。相反，我得到 this weird picture .

代码

// create the canvas to replicate the buffer text on.
var draw = new Drawing(true);

var bufferText = function (size, textFont) {
  // set the font to Georgia if it isn't defined
  textFont = textFont || "Georgia";
  // create a new canvas buffer, true means that it's visible on the screen
  // Note, Drawing is a small library I wrote, it's just a wrapper over the canvas API
  // it creates a new canvas and adds some functions to the context
  // it doesn't change any of the original functions
  var buffer = new Drawing(true);
  // context is just a small wrapper library I wrote to make the canvas API a little more bearable. 
  with (buffer.context) {
    font = util.format("{size}px {font}", {size: size, font: textFont});
    fillText("Hi there", 0, size);
  }
  // get the imagedata and store the actual pixels array in data
  var imageData = buffer.context.getImageData(0, 0, buffer.canvas.width, buffer.canvas.height);
  var data = imageData.data;
  var index, alpha, x, y;
  // loop over the pixels
  for (x = 0; x < imageData.width; x++) {
    for (y = 0; y < imageData.height; y++) {
      index = x * y * 4;
      alpha = data[index + 3];
      // if the alpha is not equal to 0, draw a red pixel at (x, y)
      if (alpha !== 0) {
        with (draw.context) {
          dot(x/4, y/4, {fillColor: "red"})
        }
      }
    }
  }
};

bufferText(20);

请注意，在这里，我的缓冲区实际上是可见的，以显示红色像素应该去的地方与它们实际去的地方相比。

我真的被这个问题弄糊涂了。

如果有人知道替代方法，那也非常欢迎。

Answer 1

替换这个...

index = x * y * 4;

与...

index = (imageData.width * y) + x;

剩下的就好了:)