时间戳

首页 > 解决方案 > 更改 JavaScript 画布动画的背景颜色

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

问题描述

我在网上找到了这个很棒的 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;
  }
}

标签： javascripthtmlcanvas

解决方案

这里的关键是了解如何在画布中设置/获取像素。两者都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/

推荐阅读