Question

我正在尝试复制此效果，但我发现提供的教程非常难以理解：http://tympanus.net/Tutorials/InteractiveTypographyEffects/index3.html

基本上，我想快速地将文本填充到画布上（比如单帧），获取图像数据（逐个扫描整个页面的像素）和IF填充像素，推送其中的粒子＆s; sx和y位置。

我知道getImageData如何工作以及如何逐个扫描像素，如下所示：

var numPixels = imageData.width*imageData.height; 

for (var i = 0; i < numPixels; i++) { 
    pixels[i*4] = 255; // Red 
    pixels[i*4+1] = 0; // Green 
    pixels[i*4+2] = 0; // Blue 
    pixels[i*4+3] = 255; // Alpha 
};

然而，我希望能够检索他们的x和y位置。我试过这样的事情：

for (var x = 0; x < imageData.width; x++) {
    for (var y = 0; y < imageData.height; y++){
        var i = x * 4 + y * 4 * imageData.width;
        if (i === 255) {
            particles.push(new Particle(x, y); //Push a particle if the pixel is filled with any color
        }
    }
}

但不幸的是，它并没有像预期的那样发挥作用。我已经坚持了很长一段时间，所以所有的想法和建议都更受欢迎

Answer 1

您可能希望量化像素以形成可放置粒子的网格（参见您链接的演示）。

要执行此操作，您只需通过设置单个网格单元格的宽度和高度来定义网格。然后从每个网格角（或中心等）中选择一个像素，以检查是否有像素集。如果你这样做，那么为该位置创建一个粒子。

只需使用字体位置，字体大小和网格大小即可获得视觉上令人满意的结果。

有关详细信息和演示，请参阅以下代码：

＆＃13;

var ctx = canvas.getContext('2d'),
    width = ctx.canvas.width,
    height = ctx.canvas.height,

    particles = [],
    gridX = 8,
    gridY = 8;

function Particle(x, y) {
    this.x = x;
    this.y = y;
}

// fill some text
ctx.font = 'bold 80px sans-serif';
ctx.fillStyle = '#ff0';
ctx.fillText("STACKOVERFLOW", 5, 120);

// now parse bitmap based on grid
var idata = ctx.getImageData(0, 0, width, height);

// use a 32-bit buffer as we are only checking if a pixel is set or not
var buffer32 = new Uint32Array(idata.data.buffer);

// using two loops here, single loop with index-to-x/y is also an option
for(var y = 0; y < height; y += gridY) {
  for(var x = 0; x < width; x += gridX) {

    //buffer32[] will have a value > 0 (true) if set, if not 0=false
    if (buffer32[y * width + x]) {
      particles.push(new Particle(x, y));
    }
  }
}

// render particles
ctx.clearRect(0, 0, width, height);

particles.forEach(function(p) {
  ctx.fillRect(p.x - 2, p.y - 2, 4, 4); // just squares here
})

＆＃13;

#canvas {background:#000}

＆＃13;

<canvas id=canvas width=500 height=180></canvas>

＆＃13;

获取画布中填充像素位置的x和y值

1 个答案: