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

【问题标题】：How do I get a one-sided gradient effect for createJS beginLinearGradientStroke?如何为 createJS beginLinearGradientStroke 获得单边渐变效果？
【发布时间】：2017-05-15 09:15:05
【问题描述】：

我正在使用 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/

谢谢你，新年快乐！

【问题讨论】：

标签： javascript animation createjs

【解决方案1】：

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

祝你好运。

【讨论】：

【解决方案2】：

我已经设法创建了一个解决方法来实现这一点！由于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*/

【讨论】：