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 위치를 적절하게 설정 함)로 나타나는 두 가지 색상으로 첫 번째 원을 만든 다음 다른 그라데이션 원으로 중첩했습니다 - 첫 번째 원 두 가지 색상, 그리고 다른 하나는 투명합니다. 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*/ 

:

다음은 JSFiddle 최종 결과를 보여주는입니다

Answer 2

방사형 그래디언트가 아니라 캔버스가 직접 지원하지 않는 원뿔 그라디언트 (또는 Photoshop의 각도 그래디언트)를 찾고 있습니다. 나는 각 그라디언트에 대한 빠른 검색을했고, 도움이 될 몇 가지 아이디어를 발견

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

행운을 빕니다.