不使用颜色混合创建LinearGradient

Question

使用 ，createLinearGradient我们可以根据 中的停止值创建颜色渐变和颜色混合addColorStop。var gradient = ctx.createLinearGradient(0, 0, 0, 400);     gradient.addColorStop(0, 'blue');        gradient.addColorStop(1, 'red');我们是否可以避免颜色混合并根据停止值具有不同的颜色而不使用混合或渐变。createLinearGradient也许这对于任何其他 API都是不可能的？fillRect我知道我们可以使用两个不同的和来创建它fillStyle。

Answer 1

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

const canvas = document.querySelector("canvas");

const ctx = canvas.getContext("2d");

const grad = ctx.createLinearGradient(0,0,0,150);

// implicit from -Infinity "green"

grad.addColorStop(0.33, "green");

grad.addColorStop(0.33, "yellow"); // same stop as previous color

grad.addColorStop(0.66, "yellow");

grad.addColorStop(0.66, "red");    // same stop as previous color

// implicit to +Infinity "red"

ctx.fillStyle = grad;

ctx.fillRect(0,0,300,150);

<canvas></canvas>