Javascript 画布矩形填充颜色

我试图在HTML5画布中创建一个矩形，我可以为它提供从最小到最大的值。为此，我想创建一个梯度变量，如

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

---

例如，用户输入值50，因此应用程序应选择蓝色和青色的中间部分并填充矩形。谢谢你的帮助。我已经浏览了SO的不同链接，但没有为我工作。要做到这一点，您可以使用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)