创建具有不同颜色比例的双色画布

Question

我想使用JavaScript创建包含两种颜色（例如橙色和蓝色）的128x128像素的图像。像素应该随机排列，我希望能够改变两种颜色的比例（例如，像“ 0.4 orange”这样的状态可以得到40％的橙色和60％的蓝色像素）。

看起来应该像这样：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9JRGlIUS5wbmcifQ==” alt =“看起来应该像这样”>“ >>

我在这里找到了一个脚本来创建具有随机像素颜色的画布，并将其修改为仅给我橙色的画布。我基本上在挣扎的是创建将颜色值分配给像素的“ if语句”。我虽然要创建一个数组，使用propotion_orange * 128 * 128唯一的元素在1和128 * 128之间随机绘制。然后针对每个像素值检查该像素值是否在该数组中，如果是，则为其分配橙色，否则分配为蓝色。对JS来说是全新的，我在创建这样的数组时遇到了麻烦。我希望我能够以一种可以理解的方式陈述我的问题...

这是我发现的用于随机像素颜色的脚本，我将其修改为仅给我橙色：

var canvas = document.createElement('canvas');
canvas.width = canvas.height = 128;
var ctx = canvas.getContext('2d');
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

for (var i = 0; i < imgData.data.length; i += 4) {
  imgData.data[i] = 255; // red
  imgData.data[i + 1] = 128; // green
  imgData.data[i + 2] = 0; // blue
  imgData.data[i + 3] = 255; // alpha
}

ctx.putImageData(imgData, 0, 0);
document.body.appendChild(canvas);

我想使用JavaScript创建包含两种颜色（例如橙色和蓝色）的128x128像素的图像。像素应该随机排列，我希望能够改变...

Answer 1

您可以为画布上的像素数创建一个颜色数组。对于每个像素，您可以指定一个rgba数组，该数组保存该像素应采用的rgba值。最初，您可以使用40％的橙色rgba阵列和60％的蓝色rgba阵列填充颜色阵列。然后，您可以对数组进行混洗以获得颜色的随机分布。最后，您可以遍历每个像素并使用颜色数组中与像素相关的值来设置其颜色。