d3js和帆布：設置α低於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更好，也許這可以改進或改變？我知道畫布很難畫出非常低的alpha值，但是有沒有辦法讓我試試！

任何想法和意見都非常歡迎，謝謝你的時間！

Answer 1

據我所知，當在畫布上渲染任何東西時，您的顏色最終將由具有四個字節（0至255）值的像素表示。例如，紅色：

[255, 0, 0, 255] 

當你定義一個rgba()顏色，您可以定義0和1之間的透明度。 （不要問我爲什麼，我對這個主題的所有知識純粹是從玩弄畫布的東西...）我的猜測是，在畫布上可以看到的最小阿爾法差異是：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小於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; }