Javascript 如何限制画布上线性渐变中的模糊？

我正在尝试创建一个颜色渐变，如下图所示

然而，我的渐变非常模糊，颜色没有像图像中那样很好地分开

有可能创造出这样的东西吗？我已经创建了一个JSFIDLE，在画布图表上使用createLinearGradient方法

以下是JSFIDLE：

下面是在我的JSFIDLE中创建渐变的代码：

// Create gradient
    grd = ctx.createLinearGradient(0, 400.000, 0, 100.000);

// Add colors
    grd.addColorStop(0.000, 'rgba(0, 255, 0, 1.000)');
    grd.addColorStop(0.200, 'rgba(191, 255, 0, 1.000)');
    grd.addColorStop(0.400, 'rgba(221, 255, 0, 1.000)');
    grd.addColorStop(0.600, 'rgba(255, 229, 0, 1.000)');
    grd.addColorStop(0.800, 'rgba(255, 144, 0, 1.000)');
    grd.addColorStop(1.000, 'rgba(255, 50, 0, 1.000)');

---

您需要使色块彼此非常接近，如下所示：

grd.addColorStop(0.000, 'rgba(0, 255, 0, 1.000)');
   grd.addColorStop(0.199, 'rgba(0, 255, 0, 1.000)');
grd.addColorStop(0.200, 'rgba(191, 255, 0, 1.000)');
 grd.addColorStop(0.399, 'rgba(191, 255, 0, 1.000)');
grd.addColorStop(0.400, 'rgba(221, 255, 0, 1.000)');
 grd.addColorStop(0.599, 'rgba(221, 255, 0, 1.000)');
grd.addColorStop(0.600, 'rgba(255, 229, 0, 1.000)');
 grd.addColorStop(0.799, 'rgba(255, 229, 0, 1.000)');
grd.addColorStop(0.800, 'rgba(255, 144, 0, 1.000)');
grd.addColorStop(0.999, 'rgba(255, 144, 0, 1.000)');
grd.addColorStop(1.000, 'rgba(255, 50, 0, 1.000)');

---

您需要为每种颜色设置“开始”和“停止”，谢谢您，它工作得非常完美！