画布矩形填充颜色

Question

我试图在html 5画布中创建一个矩形，我可以从最小到最大提供值。为此我想创建一个像

这样的渐变变量

  defaultGradient: {
        0.4: 'blue',
        0.6: 'cyan',
        0.7: 'lime',
        0.8: 'yellow',
        1.0: 'red'
    }

例如，用户输入值50，因此应用程序应选择蓝色和青色的中间并填充矩形。帮助赞赏。我已经通过SO的不同链接，但没有为我工作

Answer 1

为此，您可以使用RGB。例如，青色具有RGB（r1，g1，b1）......

  

青色：rgb（r1，g1，b1）

     

蓝色：rgb（r2，g2，b2）

当用户输入50时，您需要计算这些之间的颜色：

  resultColor = rgb((r1+r2)/2 , (g1+g2)/2, (b1+b2)/2)

如果用户输入41：

 resultColor = rgb(((19 * r1)+r2)/20 , ((19*g1)+g2)/20, ((19*b1)+b2)/20)