This question already has an answer here:
HTML Canvas gradient only show one color
（1个答案）
在4个月前关闭。
自我解释：https://jsfiddle.net/9hbx2nz7/
我想找到一种具有平衡渐变的方法，但右侧的红色部分大于左侧的红色部分。总体而言，梯度开始得太早或结束得太早，而输入似乎表明它将达到平衡。
我肯定在这里错过了一些东西。
（1个答案）
在4个月前关闭。
自我解释：https://jsfiddle.net/9hbx2nz7/
let gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0.125, "red");
gradient.addColorStop(0.25, 'orange');
gradient.addColorStop(0.375, 'yellow');
gradient.addColorStop(0.5, 'white');
gradient.addColorStop(0.625, 'yellow');
gradient.addColorStop(0.75, 'orange');
gradient.addColorStop(0.875, 'red');
ctx.fillStyle = gradient;
ctx.fillRect(10,10,200,100);
我想找到一种具有平衡渐变的方法，但右侧的红色部分大于左侧的红色部分。总体而言，梯度开始得太早或结束得太早，而输入似乎表明它将达到平衡。
我肯定在这里错过了一些东西。
最佳答案
我认为这与addColorStop的使用方式有关。基本上，您可以在渐变中指定一个点，以及该点必须具有的颜色（请参见此处：https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient/addColorStop）。它已经在该点之前进行了过渡。具体来说，它说例如在AT 0.125处，您的颜色应该为“红色”，因此它会在此之前开始转换为红色（它似乎在上一个停靠点处开始转换。因此，它在0.125处从红色转换为橙色）。因此，您的红色百分比是12.5减去过渡所需的一切。在右侧，您说AT为87.5％，您应该再次变回红色。这意味着在此之后，您将拥有12.5％的纯红色，因为没有指定进一步的过渡，因此该部分的宽度大于左侧。
希望能帮助到你。
08-06 07:33