Как работает свойство globalAlpha свойства Canvas JavaScript?

Question

Я пытаюсь сделать эффект выцветания с помощью JavaScript на элементе Canvas. У меня в настоящее время есть два решения для этого. Теоретически оба должны работать нормально, но на практике только один делает, и мне интересно, почему.

не работает код выглядит следующим образом:

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); 
} 

То, что я хотел добиться, чтобы постепенно изменить значение альфа текущего контекста, чтобы выгорает его белый цвет. Через некоторое время он должен иметь полную прозрачность, но это не так. Он останавливается прямо перед достижением этого состояния. Здесь в 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 для предстоящего прямоугольника, и он работает как шарм и превращает квадрат в воздух. Здесь он находится в 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); 
} 

[Updated fiddle]