Блог

Главная - Вопросы по программированию - Как создать вращающийся градиент (по окружности)?

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

#javascript #html #canvas #gradient

#javascript #HTML #холст #градиент

Вопрос:

Я создаю простой круг с помощью функции 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), но это приводит к вращению всего круга!

Ответ №1:

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

Например, чтобы изменить ваш градиент, сделайте это:

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

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

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

И так далее.

Комментарии:

1. Спасибо, но я не совсем понимаю вторые координаты x2 и y2. Должен ли я пройти по окружности?

2. Вы просто используете две точки, в которых вы хотите, чтобы градиент начинался и заканчивался. Итак, прямо сейчас ваш начинается в верхнем левом углу и заканчивается radius, радиус. Где вы хотите, чтобы это началось и закончилось?

3. Градиент должен быть расширен на всю окружность, поэтому я должен задать радиус. Я немного поэкспериментировал, но как я могу выполнить цикл? Я имею в виду, что такое, когда x и y равны радиусу?