Javascript createLinearGradient不带颜色混合

使用

createLinearGradient

我们可以根据

addColorStop

中的停止值创建颜色渐变和颜色混合

var gradient = ctx.createLinearGradient(0, 0, 0, 400);
    gradient.addColorStop(0, 'blue');   
    gradient.addColorStop(1, 'red');

我们可以避免颜色混合，并根据停止值使用不同的颜色，而无需混合或渐变。可能这在

createLinearGradient

任何其他API中都不可能实现

---

我知道我们可以使用两种不同的

fillRect

和

fillStyle

来创建此功能，但我不能100%确定您的意思，但是如果您想要两种不同颜色的清晰停止，您可以简单地将两种颜色设置在相同的停止位置：

const canvas=document.querySelector（“canvas”）；
const ctx=canvas.getContext（“2d”）；
常数梯度=ctx.createLinearGradient（0,0,0150）；
//隐式自-无限“绿色”
渐变加色停止（0.33，“绿色”）；
渐变添加颜色停止（0.33，“黄色”）；//与前一颜色相同的停止
渐变加色停止（0.66，“黄色”）；
渐变添加颜色停止（0.66，“红色”）；//与前一颜色相同的停止
//隐式+无限“红色”
ctx.fillStyle=梯度；
ctx.fillRect（0,0300150）
谢谢..根据文档
很难理解API
addColorStop
，该值介于0.0和1.0之间，表示渐变中开始和结束之间的位置。但是如果我把直肠actula rect的大小减小到10px
ctx.fillRect（0,0300,10）然后我只看到绿色，没有黄色，然后阅读。我尝试了多种组合，但无法使三种颜色适合10 px高度的矩形。渐变本身是无限大的，但您可以使用
createGradient（x1，y1，x2，y2）
定义停止偏移区域。所以
0
将在x1，y1和
1
将在x2，y2。好的，但如果我将实际rect的大小减小到10 px
createGradient（0，0，0，10）
平均梯度也应该适合该范围，但梯度的行为方式未知。
createGradient（0，0，300，10）
将使渐变从300x10矩形的左上角倾斜到右下角。如果希望垂直梯度为10px，则正确的值为
createLinearGradient（0,0,0,10）
始终为0到1之间的值。