Example: Create Gradient Fills

This example shows how to create gradient fills for a shape. By default, the fill attribute of a shape instance will generate a solid fill for the shape. Setting the type property on the fill attribute to linear or radial will create corresponding gradient fill. Each gradient type has its own set of properties for defining the fill. Both share the stop property. The stop property defines the colors and their opacity and position in a gradient fill. It is an array of objects containing the following information.

color: The color of the stop.
opacity: Number between 0 and 1 that indicates the opacity of the stop. The default value is 1. Note: No effect for IE <= 8
offset: Number between 0 and 1 indicating where the color stop is positioned.

Linear gradients included a rotation property which defines the direction of the gradient. (by default, linear gradients go left to right)

rotation: Linear gradients flow left to right by default. The rotation property allows you to change the flow by rotation. (e.g. A rotation of 180 would make the gradient pain from right to left.)

Radial gradients include the following additional properties:

cx: The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.
Note: This property currently has no effect on Android or IE 6 - 8.
cy: The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.
Note: This property currently has no effect on Android or IE 6 - 8.
r: Radius of the gradient circle. Determines where the color stops end. The default value is 0.5.
fx: Focal point x-coordinate of the gradient.
fy: Focal point y-coordinate of the gradient.

HTML

<div id="mygraphiccontainer"></div>

CSS

#mygraphiccontainer {
    position: relative;
    width: 700px;
    height:400px;
}

Javascript

Add a rectangle with a linear gradient.

var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
var myrect = mygraphic.addShape({
    type: "rect",
    stroke: {
        color:"#000",
        weight: 1
    },
    fill: {
        type: "linear",
        rotation: 271,
        stops: [
            {color: "#ff6666", opacity: 1, offset: 0},
            {color: "#00ffff", opacity: 1, offset: 0.5},
            {color: "#000000", opacity: 1, offset: 1}
        ]
    },
    width:685,
    height:400
});

Add a circle with a radial gradient.

var mycircle = mygraphic.addShape({
    type: "circle",
    radius: 50,
    x: 0,
    y: 0,
    fill: {
        type: "radial",
        stops: [
            {color: "#ff6666", offset: 0},
            {color: "#00ffff", offset: 0.4},
            {color: "#000000", offset: 0.7}
        ],
        fx: 0.1,
        fy: 0.3,
        r: 0.5
    },
    stroke: {
        color: "#000"
    }
});

Complete Example Source

<div id="mygraphiccontainer"></div>
<script>
    YUI().use('graphics', function (Y)
    {
            var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
            var myrect = mygraphic.addShape({
				type: "rect",
				stroke: {
                    color:"#000",
                    weight: 1
                },
                fill: {
                    type: "linear",
                    rotation: 271,
                    stops: [
                        {color: "#ff6666", opacity: 1, offset: 0},
                        {color: "#00ffff", opacity: 1, offset: 0.5},
                        {color: "#000000", opacity: 1, offset: 1}
                    ]
                },
                width:685,
                height:400
            });
            var mycircle = mygraphic.addShape({
                type: "circle",
                radius: 50,
                x: 0,
                y: 0,
                fill: {
                    type: "radial",
                    stops: [
                        {color: "#ff6666", offset: 0},
                        {color: "#00ffff", offset: 0.4},
                        {color: "#000000", offset: 0.7}
                    ],
                    fx: 0.1,
                    fy: 0.3,
                    r: 0.5
                },
                stroke: {
                    color: "#000"
                }
            });

    });
</script>

Example: Create Gradient Fills

HTML

CSS

Javascript

Complete Example Source

Examples

Examples That Use This Component