Как сделать вращающийся градиент (по кругу)? - PullRequest
Новая
       17

Как сделать вращающийся градиент (по кругу)?

2 голосов
/ 27 апреля 2011

Я создаю простой круг с функцией дуги: 

/* 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) , но это вращает весь круг!

1 Ответ

3 голосов
/ 27 апреля 2011

Да.Ваш градиент изменяется от x1,y1 до x2,y2, что является четырьмя последними аргументами createLinearGradient

Например, чтобы изменить градиент, сделайте следующее:

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

Или измените его, как вам угодно:

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

И т. Д.

...