d3js 和 Canvas：设置 Alpha 低于 0.01

Question

这可能是一个愚蠢的问题，或者一个愚蠢的方法，我愿意批评这些和其他任何事情！

我使用 d3js 和 Canvas 绘制了很多线条，我想真正突出那些线条非常密集的区域。我目前正在使用以下 strokeStyle 绘制线条：

ctx.strokeStyle = "rgba(" + myFill.r + "," + myFill.g + "," + myFill.b + ",0.01)";

但我的问题是这个不透明度不够低，我需要降低，因为稍微不那么密集的区域与非常密集的区域太相似了。

我试着跳出框框思考，但我很难想出我能做什么。如果我将笔画的 alpha 设置为低于 0.01 的任何值，那么我什么也得不到。

有什么我遗漏的，或者你能想到一些替代的想法吗？

就选项而言，我脑子里有什么，虽然我还不确定执行情况（基本上，不确定什么是可能的！！！！）：

1. 完成后对画布进行后处理，循环像素并将像素的 alpha 值设置为不同的比例，或者根据输入颜色更改像素的颜色？

2. 使用将一条线混合到所有其他线的某种技术？

3. 绘制图像后根据密度改变部分线条颜色的方法？

对不起，如果这很愚蠢，我有一些看起来不错的东西，但希望通过真正展示非常密集和密集之间的对比来使它看起来更好。我的 strokeStyle 是否还不错，也许可以以某种方式改进或改变？我知道 canvas 很难画出非常低的 alpha 的东西，但是有没有办法让我鼓励它去尝试！！！

非常欢迎任何想法和cmets，感谢您的时间！

Answer 1

据我所知，当在画布上渲染任何东西时，您的颜色最终由一个具有四个字节（0 到255）值的像素表示。例如，红色：

[255, 0, 0, 255]

定义rgba() 颜色时，您定义了0 和1 之间的透明度。 （不要问我为什么，我对这个主题的所有知识都纯粹来自玩画布的东西......）我的猜测是画布上可见的最小 alpha 差异将是：1 / 255 = 0.0039。

基本上：

rgba(0, 0, 0, 0.0039) -> [0, 0, 0, 0]
rgba(0, 0, 0, 0,0040) -> [0, 0, 0, 1]

这意味着任何小于 1/255 的 alpha 差异都不会以不同的方式呈现，任何 alpha 小于 1/255 的填充都不会显示...

可能必须对此进行测试才能绝对确定！

编辑：测试！

var createCanvas = function(alpha) {
  var cvs = document.createElement("canvas");
  cvs.width = cvs.height = 100;
  var ctx = cvs.getContext("2d");

  ctx.fillStyle = "rgba(0,0,0," + alpha + ")";

  for (var i = 0; i < 255; i += 1) {
    ctx.fillRect(0, 0, cvs.width, cvs.height)
  }

  document.body.appendChild(cvs);
}

createCanvas(0.0039); // should be transparent and show white
createCanvas(0.0040); // should not be completely white

canvas { border: 1px solid red; }