Как получить эффект одностороннего градиента для createJS beginLinearGradientStroke?

Question

Я работаю над градиентным штрихом для «загрузочного круга» с помощью createJS. Тем не менее, мне нужен только эффект градиента, который следует применять в одной «соединительной точке» двух цветов, и не применять его в другой точке соединения.

То, что я сделал это, но это только дает мне нормальный эффект градиента:

var rd = 64;  
    timerCount.graphics.setStrokeStyle(8) 
    /*        yellow ,red*/ 
     .beginLinearGradientStroke(["#F7CC00","#FE1D1E"] ,[0,1] ,0,rd*0.5 ,0,-rd); 

Пожалуйста, обратитесь к изображению ниже:

Каждый знает, как я могу это сделать ?

Вот мой код в JSFiddle: https://jsfiddle.net/flamedenise/gg9aabug/18/

Спасибо и счастливого Нового года вперед!

Answer 1

Мне удалось создать обходной путь для этого! Поскольку beginLinearGradientStroke() создает только «нормальный» градиент, я понял, что наложение его на другой градиент (с прозрачным, как второй цвет) будет работать.

То, что я сделал, это создать первый круг с двумя цветами, который будет выглядеть как «твердый» (путем установки отношений и положений x и y соответственно), а затем наложить на него другим кругом градиента - одним цветом будет комбинация первого два цвета, а другой прозрачный.

Вот JSFiddle показывает конечный результат: https://jsfiddle.net/flamedenise/n9no9Lgw/

var rd = 64;/*radius*/ 
    var circles = {}; 
    var ic = [ 
     /*0*/{ a:"#FEC331" ,b:"#FB1E24"  ,r1:0.5 ,r2:0.5 ,x0:0 ,y0:rd*0.3 ,x1:0 ,y1:-rd}, 
     /*1*/{ a:"#EA6F2B" ,b:"transparent" ,r1:0 ,r2:1 ,x0:-rd ,y0:0  ,x1:rd ,y1:0 } 
    ]; 

    var circleX = [ 0.5 ,0.75 ]; 
    var circleY = [ 0.7 ,0.7 ]; 

    for(var i=0; i<2; i++){ 
    circles[l][i] = new createjs.Shape(); 
    circles[l][i].graphics.setStrokeStyle(8) 
     .beginLinearGradientStroke([ ic[k].a ,ic[k].b ], [ic[k].r1, ic[k].r2], ic[k].x0,ic[k].y0 ,ic[k].x1,ic[k].y1); 

     circles[l][i].rotation = -90; 
    circles[l][i].x = ww*circleX[l];  
    circles[l][i].y = wh*circleY[l]; 

    var arcCommand = circles[l][i].graphics.arc(0, -20, rd, 600 * Math.PI, 0).command; 
    if (run == 1) { 
     createjs.Tween.get(arcCommand) 
     .to({ 
      endAngle: (360 * Math.PI/180) 
     }, time * 1000); 
    } 

    circleStage.addChild(circles[l][i]); 
    }/*END for loop*/ 

Answer 2

Вы не ищете радиальный градиент, а скорее конический градиент (или градиент угла в Photoshop), который Canvas не поддерживает напрямую. Я сделал быстрый поиск по Angle Градиенты, и нашел несколько идей, которые могли бы помочь:

• http://www.nixtu.info/2010/08/html5-canvas-gradients-angular-gradient.html
• https://gist.github.com/akm2/3721702
• Angle gradient in canvas

удачи.