javascript - 在 Canvas 上绘制具有 alpha 不透明度的正方形的正确方法是什么？

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++)
{
	ctx.fillStyle = "rgba(0, 0, 20, 0.2)";
	ctx.fillRect(100, 100, 300, 300);
}

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

我的理解是，经过5次循环迭代后，正方形必须消失，但在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++)
  {
  	ctx.fillStyle = "rgba(255, 255, 255, 1)";
	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++;
	
  if (i >= 50)
  {
    i = 0;
  }
}, 50);

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

Answer 1

正如您在下面看到的，不透明度不是累积(我认为该术语是乘法的，但我不是视觉专家)。我的意思是，在下面的函数两次迭代之后，您的不透明度将不再是 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>