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

我正在使用createJS为“加载圆”绘制渐变笔划。但是，我只需要在两种颜色的一个“连接点”上应用渐变效果，而不需要在另一个连接点上应用渐变效果

我是这样做的，但它只给了我一个正常的梯度效果：

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

请参阅下图：

有人知道我怎么做吗

以下是我在JSFIDLE中的代码：

---

谢谢你，新年快乐

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

---

祝你好运。

我已经设法创建了一个解决方案来实现这一点！由于

beginLinearGradientStroke（）

只会创建一个“正常”渐变，因此我发现用另一个渐变（透明作为第二种颜色）覆盖它会起作用

我所做的是用两种颜色创建第一个圆圈，这两种颜色显示为“实心”（通过相应地设置比率以及x和y位置），然后用另一个渐变圆圈覆盖它-一种颜色是前两种颜色的组合，另一种是透明的

下面是显示最终结果的JSFIDLE：

var-rd=64/*半径*/
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:“透明”，r1:0，r2:1，x0:-rd，y0:0，x1:rd，y1:0}
];
var circleX=[0.5,0.75]；
var circleY=[0.7,0.7]；
对于（var i=0；i
  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*/