如何在画布圆的小圆弧上添加渐变效果？答案

【问题标题】：How to add gradient effect on canvas circle's minor arc?如何在画布圆的小圆弧上添加渐变效果？
【发布时间】：2018-11-10 16:13:05
【问题描述】：

我正在尝试在我的画布中添加小弧线的渐变效果。使用

context.createLinearGradient(0, 0, 400. 400);
secondGradient.addColorStop(0, 'white');
secondGradient.addColorStop(0.2, 'black');
secondGradient.addColorStop(0.8, 'black');
secondGradient.addColorStop(1, 'white');

但无法获得预期的结果，如果有人能解释 createLinearGradient 如何与圆一起工作，那就太好了。

提前致谢。

http://jsfiddle.net/x4tcboj3/1/.

【问题讨论】：

去掉阴影，你会看到白色渐变this.context.shadowBlur = circle.blur; this.context.shadowColor = 'hsla('+circle.hue+', 80%, 60%, 1)';
我刚刚更新了 [link] (jsfiddle.net/x4tcboj3/2)，现在白线不见了。我可以得到白线，但想法是要有弧线末端的边缘效果。如果我不得不猜测，我认为我在 context.createLinearGradient(0, 0, 400. 400); 部分做错了。 :(
白线更新secondGradient.addColorStop(0, 'black'); secondGradient.addColorStop(0.2, 'white'); secondGradient.addColorStop(0.8, 'white'); secondGradient.addColorStop(1, 'black');jsfiddle.net/x4tcboj3/3

标签： javascript html canvas html5-canvas

【解决方案1】：

我终于明白了。关于createLinearGradient 的错误我是对的，所以我去MDN 阅读更多关于createLinearGradient 的信息，结果我必须设置两个我想要渐变效果开始的点。

（愚蠢的我，阅读文档）我正在尝试一些随机点来获得结果。我添加了一个onmousemove 事件来记住确切的点，并设置为 const secondGradient = this.context.createLinearGradient(20, 90, 75, 230); 按预期工作。

http://jsfiddle.net/x4tcboj3/4/

【讨论】：