キャンバスにアルファの不透明な四角形を描く正しい方法は何ですか？

Question

この例の四角形が表示されているのはなぜですか？私は間違っているの？

例：私は理解してどのように

var ctx = document.getElementById("ctx").getContext("2d"); 
 

 
ctx.canvas.width = 500; 
 
ctx.canvas.height = 500; 
 

 
ctx.fillStyle = "rgba(0, 0, 20, 1)"; 
 
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
 

 
ctx.fillStyle = "rgba(255, 255, 255, 1)"; 
 
ctx.fillRect(100, 100, 300, 300); 
 

 
for(let i = 0; i < 10; i++) 
 
{ 
 
\t ctx.fillStyle = "rgba(0, 0, 20, 0.2)"; 
 
\t ctx.fillRect(100, 100, 300, 300); 
 
}

<canvas id="ctx"></canvas>

、サイクルの5 iterraations後、正方形は消えるする必要がありますが、これは正しいことで不透明度を計算する方法10の後に起こるありません方法？

新しい例があります：あなたは不透明度を下回る見ることができるように

var ctx = document.getElementById("ctx").getContext("2d"); 
 
var background = "#000236"; 
 

 
ctx.canvas.width = 500; 
 
ctx.canvas.height = 500; 
 

 
ctx.fillStyle = background; 
 
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
 

 
var i = 0; 
 
var inter = setInterval(function() 
 
{ 
 

 
    for (let j = 0; j < 14; j++) 
 
    { 
 
    \t ctx.fillStyle = "rgba(255, 255, 255, 1)"; 
 
\t ctx.fillRect(10 + j * 40, i * 10, 20, 20); 
 
    } 
 
    
 
    ctx.save(); 
 
    ctx.globalAlpha = 0.2; 
 
    ctx.fillStyle = background; 
 
    ctx.fillRect(0, 0, 500, 500); 
 
    ctx.restore(); 
 
    
 
    i++; 
 
\t 
 
    if (i >= 50) 
 
    { 
 
    i = 0; 
 
    } 
 
}, 50);

<canvas id="ctx"></canvas>

Answer 1

は（私は用語が乗法だと思うが、私はビジュアルの男ではないよ）cumulativeではありません。私が意味することは、下の関数の2回の反復の後に、不透明度0.4がないことです。それは最大に近づくが、到達しない数学的プロセスだ。あなたは毎回0.2を使用していますが、あなたが見ているものは、その下の色がわずかです。あなたの背景の上に色のセロファンの部分を重ねることを考えてください、それは少し調子が悪くなるたびに、あなたは本当にあなたの背景を見て停止するつもりはありません。

var ctx = document.getElementById("ctx").getContext("2d"); 
 

 
ctx.canvas.width = 500; 
 
ctx.canvas.height = 500; 
 

 
ctx.fillStyle = "rgba(0, 0, 20, 1)"; 
 
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
 

 
ctx.fillStyle = "rgba(255, 255, 255, 1)"; 
 
ctx.fillRect(100, 100, 300, 300); 
 

 
let count = 30; 
 

 
function draw() { 
 
    ctx.fillStyle = "rgba(0, 0, 20, 0.2)"; 
 
    console.log(ctx.fillStyle); 
 
    ctx.fillRect(100, 100, 300, 300); 
 
    count--; 
 
    if (count) { 
 
     setTimeout(draw, 500); 
 
    } 
 
} 
 

 
draw();

<canvas id="ctx"></canvas>

あなたが望む結果を得るために、これはおそらく、よりよい解決策のようになります。

var ctx = document.getElementById("ctx").getContext("2d"); 
 

 
    ctx.canvas.width = 500; 
 
    ctx.canvas.height = 500; 
 

 
    ctx.fillStyle = "rgba(0, 0, 20, 1)"; 
 
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
 

 
    ctx.fillStyle = "rgba(255, 255, 255, 1)"; 
 
    ctx.fillRect(100, 100, 300, 300); 
 

 
    let count = 0; 
 
    let iterations = 5; 
 

 
    function draw() { 
 
     ctx.fillStyle = "rgba(0, 0, 20, " + count/iterations + ")"; 
 
     console.log(ctx.fillStyle); 
 
     ctx.fillRect(100, 100, 300, 300); 
 
     count++; 
 
     if (count <= iterations) { 
 
      setTimeout(draw, 500); 
 
     } 
 
    } 
 

 
    draw();

<canvas id="ctx"></canvas>