circle with conical gradient

is possible to create 开发者_运维百科a circle with raphael with conical gradient? Something like colorwheel of http://raphaeljs.com/picker/ but with customized colors ex: "from red to orange to yellow to green to yellow to orange to red)"

Yes it is, try this function (I statred from Raphael's Colorpicker code, made it stand-alone and added the gradation between specific colors instead of just increasing the hue along the disc):

var paper = Raphael('paper', 800, 600);

var wheel = function (x, y, r, colors) {
    var pi = Math.PI;
    var nbColors = colors.length;
    //    Formatting every color to its RGB values
    for (var i = 0 ; i < nbColors ; i++)
    {
        colors[i] = Raphael.getRGB(colors[i]);
    }
    //    Initialize segments    
    var segments = pi * r * 2 / Math.min(r / 8, 4);
    var a = pi / 2 - pi * 2 / segments * 1.5;
    var path = ["M", x, y - r, "A", r, r, 0, 0, 1, r * Math.cos(a) + x, y - r * Math.sin(a), "L", x, y, "z"].join();
    //    Draw segments
    for (var i = 0 ; i < segments ; i++)
    {
        //    Between which 2 colors is this segment?
        var j = nbColors * i / segments;
        var n = Math.floor(j);
        var d = j % 1;
        var color1 = colors[n];
        var color2 = colors[(n + 1) % nbColors];
        //    Calculate the segment's color from the 2 other
        var color =
        {   r :   Math.round(d * (color2.r - color1.r) + color1.r)
        ,   g :   Math.round(d * (color2.g - color1.g) + color1.g)
        ,   b :   Math.round(d * (color2.b - color1.b) + color1.b)
        }
        //    Draw the sector
        paper.path(path).attr(
        {   stroke: 'none'
        ,   fill: 'rgb(' + color.r + ',' + color.g + ',' + color.b + ')'
        ,   rotation: [90 + (360 / segments) * i, x, y]
        });
    }
    //    Surrounding circle
    return paper.circle(x, y, r).attr(
    {   stroke : '#fff'
    ,   'stroke-width' : Math.round(r * .03)
    });
};

You can use it like this, the 4th parameter being an array of colors to use:

wheel (100, 100, 50, ['#F00', '#0FF', '#00F', '#0F0', '#F80']);
wheel (500, 200, 50, ['rgb(255,0,0)', 'hsb(40,100,100)', '#0F00F0']);