Creating Rainbow Gradient CreateJS

问题

****Edit*** I have figured out the issue my next question is, why is that if I change the first X point and leave the others at 0 that I get my desired gradient effect?

function init(){
    var canvas = document.getElementById("easel"),
    SIZE = 250,
    centerX = canvas.width/2,
    centerY = canvas.height/2;

////////////////////////////////////
///////// Rainbow Arc /////////////
//////////////////////////////////  
    var newStroke = new createjs.Shape();
    //newStroke.graphics.beginStroke("#000");
    newStroke.graphics.beginLinearGradientStroke(["#ff0000","#ff6600","#ffff00","#009933","#0033cc","#4b0082","#551a8b"], [0,.14,.28,.42,.56,.70,.84,.98], 190,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
    newStroke.graphics.setStrokeStyle(20, 1, 1);
    newStroke.graphics.arc(100,100,50, 0 ,180*(Math.PI/180), true);

回答1:

You will have to create one manually. An alternative could be to render this to an off-screen canvas, then use that canvas as an image with CreateJS.

A quick way to do create a cone gradient:

var ctx = c.getContext("2d"),
    radius1 = 110,                                  // inner radius
    radius2 = 150,                                  // outer radius
    gap = Math.ceil(radius2 * 2 * Math.PI / 360);   // gap between each degree

for(var a = 360; a--;) {
  ctx.setTransform(1,0,0,1,150,150);                // 150=center (x,y)
  ctx.rotate(a / 180 * Math.PI);                    // current angle
  ctx.fillStyle = "hsl(" + a + ",100%,50%)";        // color using HSL based on angle
  ctx.fillRect(radius1, 0, radius2 - radius1, gap); // fill a segment
}

<canvas id=c height=300></canvas>

来源：https://stackoverflow.com/questions/37286039/creating-rainbow-gradient-createjs

标签

javascript

canvas

html5-canvas

createjs

linear-gradients