如何制作旋转渐变（在圆上）？
我用 arc 函数创建一个简单的圆：
/* ctx is the 2d context */
ctx.beginPath();
var gradient = ctx.createLinearGradient(0, 0, this.radius, this.radius);
gradient.addColorStop(0, '#FF0000');
gradient.addColorStop(1, '#FFFFFF');
ctx.lineWidth = 10;
ctx.arc(this.radius, this.radius, this.radius, 0, 2*Math.PI, true);
ctx.strokeStyle = gradient;
ctx.stroke();
所以我想旋转渐变，这可能吗？ 我尝试过使用 ctx.rotate(x) ，但这会旋转整个圆！
I create a simple circle with the arc function:
/* ctx is the 2d context */
ctx.beginPath();
var gradient = ctx.createLinearGradient(0, 0, this.radius, this.radius);
gradient.addColorStop(0, '#FF0000');
gradient.addColorStop(1, '#FFFFFF');
ctx.lineWidth = 10;
ctx.arc(this.radius, this.radius, this.radius, 0, 2*Math.PI, true);
ctx.strokeStyle = gradient;
ctx.stroke();
So I want to rotate the gradient, is that possible?
I've tried with ctx.rotate(x) but that rotates the whole circle!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
是的。您的渐变将从
x1,y1到x2,y2，这是createLinearGradient的最后四个参数。例如，要反转渐变，请执行以下操作： this:
vargradient = ctx.createLinearGradient(this.radius, this.radius, 0, 0);或者随意更改它：
vargradient = ctx.createLinearGradient(this.radius, 0, 0, 0);等等。
Yes. Your gradient is going from
x1,y1tox2,y2, which are the four last arguments ofcreateLinearGradientFor example, to reverse your gradient do this:
var gradient = ctx.createLinearGradient(this.radius, this.radius, 0, 0);Or change it up however you please:
var gradient = ctx.createLinearGradient(this.radius, 0, 0, 0);And so on.