d3js 和 Canvas：将 Alpha 设置为低于 0.01

Question

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

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

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

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

我试着跳出框框思考一下，但我正在努力思考我能做什么。如果我将描边的 alpha 设置为任何低于 0.01 的值，那么我什么也得不到。

有没有我遗漏的东西，或者你能想到一些替代的想法？

目前我脑子里有什么选择，虽然我还不确定执行（基本上，不确定什么是可能的！！！！）：

Post-完成后处理 canvas，遍历像素并将像素的 alpha 值设置为不同的比例，或根据需要更改像素的颜色在输入颜色上？
使用将一条线与所有其他线混合的技术？
绘制后根据密度改变部分线条颜色的方法？

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

非常欢迎任何想法和意见，感谢您的宝贵时间！

Answer 1

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

[255, 0, 0, 255]

当您定义 rgba() 颜色时，您定义的透明度介于 0 和 1 之间。（不要问我为什么，我对这个主题的所有知识都纯粹来自玩 canvas 的东西......）我的猜测是 canvas 上可见的最小 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; }

d3js 和 Canvas：将 Alpha 设置为低于 0.01

d3js and Canvas: Setting Alpha lower than 0.01

javascript

html

d3.js

canvas

alpha