Сделать вращающийся градиент на окружности?

Я пытаюсь получить вращающийся градиент на окружности, чтобы следовать этому макету.
вращающийся градиент, следующий за линией http://f.cl.ly/items/3y161Z3M0t331K3E0j1e/Screen%20Shot%202013-04-09%20at%205.45.37%20PM.png



Я высмеял то, что я пытаюсь сделать в JSFiddle.



Для вашего удобства вот код: 



var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var radius = 75;

var startAngle = 0// 1.1 * Math.PI;

var endAngle = 2.0 * Math.PI;//1.9 * Math.PI;

var counterClockwise = false;



context.beginPath();

var gradient = context.createLinearGradient(radius, radius, 0, 0);

gradient.addColorStop(0, '#3b749a');

gradient.addColorStop(1, '#FFFFFF');

context.lineWidth = 15;



context.arc(radius, radius, radius, startAngle, endAngle, counterClockwise);



context.strokeStyle = gradient;

context.stroke(gradient);


А теперь вот мой вызов. Как бы я ни старался, мне не удается заставить градиент следовать по пути. Кажется, это применимо с любой точки зрения оно желает, но не следует по пути. Что я делаю не так?

Во-вторых, можно ли получить закругленный угол на одном краю, как на макете?

Последующий вопрос к несовершенному решению:



Таким образом, кажется, что нет никакого способа обвести путь градиентом, только применить градиент к холсту, который путь "вырезает"."(И в HTML5 нет градиента" circle " AFAIK.)



Поскольку предлагаемое решение требует рисования двух элементов, каков наилучший способ повернуть / оживить это? С одним объектом / контекстом, казалось, я мог просто схватить его, преобразовать и повернуть. С двумя, Нужно ли мне отрисовывать объект изображения и поворачивать?

522   2  

2 ответов:

На самом деле это было не так уж и тривиально. Возможно, был более простой способ сделать это, и я просто взял жесткий подход. Или, может быть, это что-то новенькое.

Что я сделал, так это нарисовал градиентный прямоугольник внутри круга. На интервале окружность меняет свои начальную и конечную точки так, что зазор вращается. Пока это происходит, Я пересчитываю поле градиента, чтобы вписаться в новый зазор, а затем рисую его там. В результате получается приятный эффект.

В этой демонстрации я настроил его чтобы произвольно переключаться по цветам и разным размерам, чтобы показать, как выглядят разные блесны, и повеселиться.

Демо JsFiddle

Мясо операции находится в этой функции: 

function showSpinner(
 startAngle,endAngle,direction,radius,line,context,color,shadow)
{
 context.beginPath();
 var a = startAngle / Math.PI;
 a = a % 2;
 a = 2 - a;
 a *= Math.PI;
 var x = radius + Math.cos(a)*radius*1.7;
 var y = radius - Math.sin(a)*radius*1.7;
 var gradient = context.createLinearGradient(radius,radius,x,y);
 gradient.addColorStop(0.05, color);
 gradient.addColorStop(.60, '#FFFFFF');
 context.lineWidth = line;
 context.lineCap = "round";
 context.shadowBlur = 10;
 if( shadow === true )context.shadowColor = '#727272';
 context.arc(radius, radius, radius-line, startAngle, endAngle, direction);
 context.strokeStyle = gradient;
 context.stroke();
}

Эта функция использует вышеупомянутую функцию рисования для обеспечения анимации 

function spinner(obj){
 var radius,line,color,shadow;
 if( obj && obj.hasOwnProperty("shadow") ){
  shadow = true;
 }else{ radius = 75; }
 if( obj && obj.hasOwnProperty("radius") ){
  radius = obj.radius;
 }else{ radius = 75; }
 if( obj && obj.hasOwnProperty("line") ){
  line = obj.line;
 }else{ line = 7; }
 var speed = {inc:0.04,loop:15};
 if( obj && obj.hasOwnProperty("speed") ){
  if( obj.speed == "slow" ){
   speed = {inc:0.02,loop:25};
  }
 }
 if( obj && obj.hasOwnProperty("color") ){
  color = obj.color;
 }else{ color = '#3b749a'; } 
 var canvas = document.getElementById('myCanvas');
 canvas.style.height = 2*(radius+line) + "px";
 canvas.style.width = 4*(radius+line) + "px";
 var context = canvas.getContext('2d');
 var startAngle,endAngle;
 var counterClockwise = false;
 var sa = 1.2;
 var ea = 0.85;

 var spinner = setInterval(function(){
   canvas.width = canvas.width;
   sa += speed.inc;
   ea += speed.inc;
   startAngle = sa * Math.PI;
   endAngle = ea * Math.PI;
   showSpinner(
     startAngle,
     endAngle,
     counterClockwise,
     radius,
     line,
     context,
     color, 
     shadow
   );
 },speed.loop);
 setTimeout(function(){ clearInterval(spinner);},15000);
 return spinner;
}
Но все, что вам действительно нужно сделать, чтобы использовать это, - это 
spinner()

Передайте аргумент, если хотите. Вы можете выбрать радиус, линию, цвет, тень и скорость.

var obj = {};
obj.line = int - the size in pixels of the line width
obj.radius = int - the radius of the circle drawn (currently maxed at 75 for viewing, but you can always change the size of the canvas if you want)
obj.color = string - the color that the line of the spinner will be
obj.shadow = bool - show the shadow or don't show it
obj.speed = string - Only supports "slow" right now. Otherwise it will be fast
2  
2013-04-10 04:40:39

Может быть, не очень элегантно: 

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 67.5;
context.beginPath();
context.arc(x, y, radius, 0, 2.0 * Math.PI, false);
context.lineWidth = 15;
context.strokeStyle = '#3b749a';
context.stroke();

context.beginPath();
context.arc(x, y, radius, -Math.PI/2, Math.PI/2, false);
var gradient = context.createLinearGradient(0, y-radius, 0, y+radius);
gradient.addColorStop(0, '#3b749a');
gradient.addColorStop(0.5, '#FFFFFF');
gradient.addColorStop(1, '#3b749a');
context.lineWidth = 15;
context.strokeStyle = gradient;
context.stroke(gradient);
1  
2013-04-09 22:10:11

Comments

    Ничего не найдено.
Click here to cancel reply.