JavaScript - 在 HTML5 画布上生成随机像素答案

【问题标题】：JavaScript - Generate random pixels on HTML5 canvasJavaScript - 在 HTML5 画布上生成随机像素
【发布时间】：2018-06-30 00:16:44
【问题描述】：

我想创建一个随机生成的图像（随机颜色），例如 this one。但是，我想用 javascript 来做，但由于某种原因我得到了黑屏。

这是我的代码：

var g=document . createElement( 'canvas').getContext('2d');
g.canvas.width=g.canvas.height = 800;
g.imgd = g.getImageData(0, 0, 800, 800);
g.data = g.imgd.data;

g.data.forEach((_, index) => (index & 3) < 3 && (g.data[index] = Math.random()));
g.putImageData(g.imgd, 0, 0);

document.body.appendChild(g.canvas);;;

我正在黑屏，在某些网站上它是白屏。那么在我的脚本中什么不起作用？我的英语不是很好，但是谁能解释一下出了什么问题，我的代码不起作用。

我也尝试了不同尺寸的画布，但我没有看到任何错误，所以出了什么问题？

【问题讨论】：

document 和 createElement 之间真的有空格吗？
您是否在控制台中遇到任何错误？

标签： javascript html google-chrome google-chrome-extension web

【解决方案1】：

您正在使用 Math.random()，它生成从 0 到 1 的浮点数，但不包括 1。由于您将零应用于颜色分量（来自 getImageData().data 的数据），因此您会得到黑色 (rgb(0, 0, 0))。

这是一个更易读的解决方案：

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

function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

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

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

【讨论】：

【解决方案2】：

Math.random() 返回一个浮点数，不在 0-255 的全范围内。您也可以使用.fillStyle() 并将颜色设置为随机的十六进制颜色。

function pixels(width = 100, height = 100, size = 1, canvas) {

  var canvas = canvas || document.createElement("canvas");
  
  var ctx = canvas.getContext("2d");
  
  var total = [];
  
  canvas.width = width;
  
  canvas.height = height;

  function random() {
    return "XXXXXX".replace(/X/g, function() {
      var seed = "a0b1c2d3e4f56789";
      return seed.charAt(Math.floor(Math.random() * seed.length))
    })
  };
  
  for (var x = 0; x <= width; x += size) {
    total.push(x)
  };

  total.forEach(function(value, index) {
    for (var i = 0; i <= height; i++) {
      ctx.fillStyle = "#" + random();
      ctx.fillRect(value, total[i], size, size);
    }
  });
  
  document.body.appendChild(canvas);
  
  return ctx;
  
};

var c = pixels(window.innerWidth - 20, window.innerHeight - 20);

【讨论】：