Javascript HTML画布渐变仅显示一种颜色

我在画布渐变上遇到问题，它只显示我在渐变上设置的最后一种颜色。\uuu addColorStop\uu offset，color method

例如，下面是我的一段代码，以便更好地理解：

让canvas=document.getElementById'canvas'； 设ctx=canvas.getContext'2d'； 设梯度=ctx.createLinearGradient10,90,200,90； 渐变色1/10，黑色； 渐变色1/5，黄色； gradient.addColorStop1/1，红色； 设circle1=新的Circle300、250、50，梯度； 圆圈1.1.x； 这段代码只画了一个红色的圆圈，如果我评论这条线的梯度，对任何填充了梯度的形状都是一样的；然后在画布上画一个黄色圆圈，只读最后一种颜色。我在jsfiddle.net上尝试了相同的代码，效果非常好，我不知道为什么我的脚本不能工作

PD:Circle是我定义的一个js对象，工作得非常完美

对不起我的英语，如果帖子不懂请告诉我，这是我在StackOverflow上的第一篇帖子。

---

谢谢

画布渐变是相对于上下文的变换矩阵，而不是要填充的形状

因此，在您的示例中，由于您正在绘制一个水平渐变，因此仅在从x:10到x:200的区域中设置该渐变。x:10之前的像素将在索引0处具有值，x:200之后的像素将在索引1处具有值。 因为你画的是300150半径为50的圆，所以你的圆的最小x位置是250，这是在你的渐变指数1之后，因此是红色的

以下是发生的情况的可视化演示：

让canvas=document.getElementById'canvas'； 设ctx=canvas.getContext'2d'； 设梯度=ctx.createLinearGradient10,90,200,90； 渐变色1/10，黑色； 渐变色1/5，黄色； gradient.addColorStop1/1，红色； //绘制一个完整的矩形以查看渐变的实际渲染方式 ctx.fillStyle=渐变； ctx.fillRect0,0，canvas.width，canvas.height； ctx.beginPath； ctx.arc300、150、50、0、Math.PI*2； ctx.strokeStyle=‘白色’； ctx.stroke；

---

您需要定义圆在X=275到X=325之间的渐变。它已经在X=200时到达红色停止点3，因为梯度是从X=10到X=200定义的