javascript - 如何制作旋转渐变(在圆上)？

Question

我用 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)，但这会旋转整个圆!

Answer 1

是的。您的渐变将从 x1,y1 到 x2,y2，这是 createLinearGradient

的最后四个参数

例如，要反转渐变，请执行以下操作:

var 渐变 = ctx.createLinearGradient(this.radius, this.radius, 0, 0);

或者随意更改它:

var 渐变 = ctx.createLinearGradient(this.radius, 0, 0, 0);

等等。