创建Rainbow渐变CreateJS [英] Creating Rainbow Gradient CreateJS

问题描述

****编辑***我已经弄清楚了我的下一个问题是，为什么如果更改第一个X点并将其他X点保留为0，我会得到所需的渐变效果吗?

****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);

推荐答案

您将必须手动创建一个.另一种选择是将其渲染到屏幕外的画布，然后将该画布用作CreateJS的图像.

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>

这篇关于创建Rainbow渐变CreateJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！