createJS beginLinearGradientStroke 如何获得单边渐变效果？

Question

我正在使用 createJS 为 "loading circle" 制作渐变描边。但是，我只需要在两种颜色中的一种"joining point"上应用渐变效果，而无需在另一个连接点上应用。

我做的是这个，但它只是给我一个正常的渐变效果：

    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

您要的不是径向渐变，而是圆锥渐变（或 Photoshop 中的角度渐变），Canvas 不直接支持。我快速搜索了角度渐变，发现了一些可能有用的想法：

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

祝你好运。

Answer 2

我已经设法创建了一个解决方法来实现这个！由于 beginLinearGradientStroke() 只创建一个 "normal" 渐变，我发现用另一个渐变（透明作为第二种颜色）覆盖它会起作用。

我所做的是用显示为 "solid" 的两种颜色创建第一个圆（通过相应地设置比率以及 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*/

createJS beginLinearGradientStroke 如何获得单边渐变效果？

How do I get a one-sided gradient effect for createJS beginLinearGradientStroke?

javascript

animation

createjs