Как изменить градиент этой карты тепла, чтобы фон был белым, а не черным

Question

Я пытаюсь сделать слой тепловой карты на своем участке, и вместо белого цвета вместо фона черный, поэтому данный градиент исчезает до черного. Я хотел бы сохранить одно и то же «направление», чтобы красный был «самым горячим» и т. Д., Но вместо черного, как минимальный цвет, я бы хотел, чтобы он был белым, поэтому он выглядит так, как будто он соответствует моему первоначальному сюжету. Вот моя скрипка: http://jsfiddle.net/davidreed0/2hvLkf35/9/

изменить фон от черного к белому здесь:

defaultColor = this.bgcolor || [0, 0, 0, 0]; 

, но я не могу понять, где градиент фактически вычисляется.

Answer 1

Поиграв немного со своей скрипкой, я думаю, что обнаружил, где вычисляется градиент.

Он использует кодировку HSL для представления цветов. Ключ здесь Светимость. По мере понижения значения светимость также снижается. HSL определяет оттенок и насыщенность тона, где яркость определяет яркость. Светимость 0 будет черной, просто ваш случай.

Так щипая процедура:

HeatCanvas.defaultValue2Color = function(value) { 
    var h = (1 - value); 
    // now we make luminosity inversely proportional 
    var l = 1 - value * 0.6; 
    var s = 0.8; 
    var a = 1; 
    return [h, s, l, a]; 
} 

эффективно выцветает до белого.

Возможно, вам понадобится настроить эти константы (0,6 и 0,8), чтобы получить лучший результат. Взгляните на обновленную скрипку, чтобы узнать, подходит ли она для ваших нужд!

http://jsfiddle.net/2hvLkf35/14/