JavaScript Canvas globalAlpha屬性如何工作？

Question

我正在嘗試在Canvas元素上使用JavaScript淡出效果。 我目前有兩種解決方案。 從理論上講，兩者都可以正常工作，但實際上只有一個可以，我想知道為什么。

無效的代碼如下：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i = 1;
requestAnimationFrame(test);

function test(){
 i-=0.01;
 ctx.fillStyle = "white";
 ctx.fillRect(20, 20, 75, 50);
 ctx.globalAlpha = i;
 ctx.fillStyle = "red";
 ctx.fillRect(20, 20, 75, 50);
 requestAnimationFrame(test);
}

我想要實現的是逐漸更改當前上下文的alpha值，以使其褪色為白色。 一段時間后，它應該具有完全的透明度，但是沒有透明度。 它會在到達該狀態之前停止。 它在JSFiddle中： https ://jsfiddle.net/bq75v1mm/

工作代碼如下：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i = 1;
requestAnimationFrame(test);
function test(){
 i-=0.01;
 ctx.fillStyle = "white";
 ctx.fillRect(20, 20, 75, 50);
 ctx.fillStyle = "rgba("+255+","+0+","+0+","+i+")";
 ctx.fillRect(20, 20, 75, 50);
 requestAnimationFrame(test);
}

使用此代碼，我只是為即將到來的矩形更改給定fillStyle的alpha值，它的工作原理就像一個魅力，並且使正方形消失了。 它在JSFiddle中： https ://jsfiddle.net/mxtynwwd/

我想了解為什么第一種解決方案不起作用？ 給定最小值后，為什么不能降低globalAlpha值？ 還是代碼中的問題？

Answer 1

1. 在第二個示例中，您每次在繪制白色矩形之前都要重置fillStyle 。
   在第一個示例中，您沒有對globalAlpha進行相同的操作。

2. 並非所有值都將被globalAlpha屬性接受。 報價MDN ：

   0.0 （完全透明）和1.0 （完全不透明）之間的數字。 默認值為1.0超出范圍的值（包括Infinity和NaN將不會設置， globalAlpha將保留其以前的值。

   由於浮點數學運算中的精度損失，當i變為負數時， globalAlpha會卡在0.009999999999999247 （可能因計算機而異）。

要解決以上兩個問題，請在繪制白色矩形之前重置globalAlpha ：

ctx.globalAlpha = 1;

在繪制紅色的之前，請確保i >= 0 ：

i = i < 0 ? 0 : i;

您的第一個示例可以相應地更新為與第二個示例完全相同：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i = 1;
requestAnimationFrame(test);

function test() {
    i -= 0.01;
    i = i < 0 ? 0 : i;
    ctx.globalAlpha = 1;
    ctx.fillStyle = "white";
    ctx.fillRect(20, 20, 75, 50);
    ctx.globalAlpha = i;
    ctx.fillStyle = "red";
    ctx.fillRect(20, 20, 75, 50);
    requestAnimationFrame(test);
}

[ 更新小提琴 ]