Question

我在线上找到了这个奇妙的HTML5火动画[来源：YouTube上的iBasskung]，我试图弄清楚如何使黑色背景透明。我是中级JS编码器，但似乎背景是火的一部分，并且需要不透明度为0。

我已经检查了颜色阵列和火焰渲染器，但是在任何地方都看不到任何十六进制或rgba值。

关于如何从火焰自身中解救出黑色bg的想法？

// color array
for (i = 0; i < 32; ++i) {
    colors[i][2] = i << 1;
    colors[i + 32][0] = i << 3;
    colors[i + 32][2] = 64 - (i << 1);
    colors[i + 64][0] = 255;
    colors[i + 64][1] = i << 3;
    colors[i + 96][0] = 255;
    colors[i + 96][1] = 255;
    colors[i + 96][2] = i << 2;
    colors[i + 128][0] = 255;
    colors[i + 128][1] = 255;
    colors[i + 128][2] = 64 + (i << 2);
    colors[i + 160][0] = 255;
    colors[i + 160][1] = 255;
    colors[i + 160][2] = 128 + (i << 2);
    colors[i + 192][0] = 255;
    colors[i + 192][1] = 255;
    colors[i + 192][2] = 192 + i;
    colors[i + 224][0] = 255;
    colors[i + 224][1] = 255;
    colors[i + 224][2] = 224 + i;
  }

// render the flames
for (let y = skipRows; y < canvasHeight; ++y) {
  for (x = 0; x < canvasWidth; ++x) {
    index = y * canvasWidth * 4 + x * 4;
    let value = fire[(y - skipRows) * canvasWidth + x];

    data[index] = colors[value][0];
    data[++index] = colors[value][1];
    data[++index] = colors[value][2];
    data[++index] = 255;
  }
}

Answer 1

此处的关键是了解设置/获取像素在画布中的工作方式。 getImageData和putImageData都可以处理一维数组中的像素值。您可以使用data数组在代码中看到这一点：

// red value 0-255
data[index] = colors[value][0];

// green value 0-255
data[++index] = colors[value][1];

// blue value 0-255
data[++index] = colors[value][2];

// alpha value 0-255
data[++index] = 255;

由于火的全红色值接近255，因此您也可以将红色通道也用作Alpha。

// alpha value 0-255
data[++index] = colors[value][0];

这是您的提琴的工作版本：

https://jsfiddle.net/jq6urawb/

更改JavaScript画布动画的背景颜色

1 个答案: