颜色比例取决于绘制点的频率（JS Canvas）答案

【问题标题】：Color-Scales depending on how often a point gets drawn (JS Canvas)颜色比例取决于绘制点的频率（JS Canvas）
【发布时间】：2017-10-16 11:53:51
【问题描述】：

最近我创建了一个项目，涉及在画布上绘制很多点来绘制一个奇怪的吸引子。这个项目的细节并不重要，但如果你想看到它的实际效果，请到这里：How can I check if an attractor is strange?

我遇到的问题如下：如何在画布上绘制一个点，其颜色取决于颜色，已经存在？换句话说：如何实现取决于特定点被着色次数的色阶？

我实际上找到了一种方法，但我不确定它是否是最好的。以下是它的工作原理：

ctx.globalCompositeOperation = "lighter";
ctx.fillStyle = "rgb(50,5,1)";
ctx.fillRect(x,y,size,size);

它只是增加了已经存在的颜色。这看起来已经很不错了：

但是使用这种方法也有很多限制：

例如，我无法将颜色从绿色变为红色
在白色背景上使用此方法是不可能的
我无法创建包含超过“固定点”的色阶，例如 red->green->blue

也许你知道比我更好的方法...

【问题讨论】：

如果——不是直接将点绘制到画布上——而是将吸引点保存到 3d 数组中（x、y、每个坐标的数据点），该怎么办。然后，您将确定整个数组的最大值/最小值，最后将每个像素绘制到画布上，同时将点的数量映射到渐变。
这是一个示例实现jsfiddle.net/m58u1vkv/2
@thykka 问题在于，我不仅仅在特定的 x,y 值上绘制点，而且在两者之间......
您仍然可以这样做。首先将坐标放大，将它们四舍五入，将它们保存到数组中，当你绘制数组时，再次缩小坐标。

标签： javascript canvas colors

【解决方案1】：

我认为您需要跟踪每个像素的点击量，以实现允许您更改图片颜色的功能，而不仅仅是亮度或红色。如上所述，您应该使用多维数组来跟踪每个像素的命中。

var canvasPixels = [];
for (var y = 0; y < 1000; y++) {
    canvasPixels[y] = [];
    for (var x = 0; x < 1000; x++) {
    canvasPixels[y][x] = 0;
  }
}

如果您自己应用颜色数学，您可以做很多事情。这里我使用的是彩色正弦波。

function getColor(hits) {

  var frequency = 0.3;
  var r = Math.round(Math.sin(frequency*hits + 0) * 127 + 128);
  var g = Math.round(Math.sin(frequency*hits + 2) * 127 + 128);
  var b = Math.round(Math.sin(frequency*hits + 4) * 127 + 128);

  return "rgb(" + r + "," + g + "," + b + ")";
}

那么，你在画的时候就用这个函数来循环彩虹吧。

canvasPixels[y][x]++;
ctx.fillStyle = getColor(canvasPixels[y][x]);
ctx.fillRect(x,y,size,size);

【讨论】：