Question

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

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

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

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

我试图在盒子外面思考一下，但我很难想到我能做些什么。如果我将笔画的alpha设置为低于0.01的任何值，那么我什么也得不到。

我有什么遗漏，或者你能想到一些其他想法吗？

到目前为止，我的选择是什么，虽然我还不确定执行情况（基本上，不确定什么是可能的!!!!）：

完成后处理画布，循环像素并将像素的alpha值设置为不同的比例，或根据输入颜色更改像素的颜色？
使用线条与所有其他线条混合的一些技巧？
绘制图像后根据密度更改部分线条颜色的方法？

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

非常欢迎任何想法和评论，谢谢你的时间！

Answer 1

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

[255, 0, 0, 255]

定义rgba()颜色时，可以定义0和1之间的透明度。（不要问我为什么，我对这个主题的所有知识都纯粹来自于使用画布的东西...）我的猜测是在画布上可见的最小alpha差异是：{{1 }}

基本上：

1 / 255 = 0.0039

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

可能必须测试这个绝对确定！

编辑：测试！

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: