HTML5 Radial Gradient

By | June 4, 2014
0
0



The one of our readers asked me – what if generate a radial gradient with html5 instead of using ready images (for our’s color picker which we developed several days ago). And, I decided, why not? This is not so difficult, and it would be useful for everybody. The main idea is to separate a circle into multiple sectors, and – to fill these sectors with a radial color (which depends on an angle). After working for a while – I got the desired result – canvas-based radial gradient.

Step 1. HTML

As usual (for all canvas-based demos) we have a very basic html markup (with a single canvas object inside):

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>HTML5 Radial Gradient | Script Tutorials</title>

        <!-- add styles -->
        <link href="css/main.css" rel="stylesheet" type="text/css" />

        <!-- add script -->
        <script src="js/script.js"></script>
    </head>
    <body>
        <div>
            <canvas id="gradient" width="500" height="500" tabindex="1"></canvas>
        </div>
    </body>
</html>

Step 2. JS

Now, please create an empty ‘script.js’ file (inside ‘js’ folder) and put this code inside (this is full JS code of our HTML5 Radial Gradient script). I’ll explain the main functionality below this code.

js/script.js

// Get angle color function
function getAngleColor(angle) {
    var color, d;

    if (angle < Math.PI * 2 / 5) { // angle: 0-72
        d = 255 / (Math.PI * 2 / 5) * angle;
        color = '255,' + Math.round(d) + ',0'; // color: 255,0,0 - 255,255,0
    } else if (angle < Math.PI * 4 / 5) { // angle: 72-144
        d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 2 / 5);
        color = (255 - Math.round(d)) + ',255,0'; // color: 255,255,0 - 0,255,0
    } else if (angle < Math.PI * 6 / 5) { // angle: 144-216
        d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 4 / 5);
        color = '0,255,' + Math.round(d); // color: 0,255,0 - 0,255,255
    } else if (angle < Math.PI * 8 / 5) { // angle: 216-288
        d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 6 / 5);
        color = '0,'+(255 - Math.round(d)) + ',255'; // color: 0,255,255 - 0,0,255
    } else { // angle: 288-360
        d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 8 / 5);
        color = Math.round(d) + ',0,' + (255 - Math.round(d)) ; // color: 0,0,255 - 255,0,0
    }
    return color;
}

// inner variables
var iSectors = 360;
var iSectorAngle = (360 / iSectors) / 180 * Math.PI; // in radians

// Draw radial gradient function
function drawGradient() {

    // prepare canvas and context objects
    var canvas = document.getElementById('gradient');
    var ctx = canvas.getContext('2d');

    // clear canvas
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    // save current context
    ctx.save();

    // move to center
    ctx.translate(canvas.width / 2, canvas.height / 2);

    // draw all sectors
    for (var i = 0; i < iSectors; i++) {

        // start and end angles (in radians)
        var startAngle = 0;
        var endAngle = startAngle + iSectorAngle;

        // radius for sectors
        var radius = (canvas.width / 2) - 1;

        // get angle color
        var color = getAngleColor(iSectorAngle * i);

        // draw a sector
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.arc(0, 0, radius, startAngle, endAngle, false);
        ctx.closePath();

        // stroke a sector
        ctx.strokeStyle = 'rgb('+color+')';
        ctx.stroke();

        // fill a sector
        ctx.fillStyle = 'rgb('+color+')';
        ctx.fill();

        // rotate to the next sector
        ctx.rotate(iSectorAngle);
    }

    // restore context
    ctx.restore();
}

// initialization
if(window.attachEvent) {
    window.attachEvent('onload', drawGradient);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            drawGradient();
        };
        window.onload = newonload;
    } else {
        window.onload = drawGradient;
    }
}

Once our window has loaded (onload event) we draw our radial gradient (drawGradient function). In the beginning we prepare canvas and context objects (as usual), after – more interesting: as I told, we are going to split whole circle (360 degrees) into sectors (I decided to use 360 sectors for more smooth gradient). In order to draw every sector we should jump to the center, draw an arc, and then – we need to fill this area (sector) with a certain color. To generate radial color we have to return a certain color depending on an angle. I defined ‘getAngleColor’ function for this purpose. Once we have drawn a sector – we draw next sector (until we finish with all of them to build whole radial circle).

Conclusion

That’s all for today, we have just finished building own html5 radial gradient element. See you next time, good luck!

Leave a Reply

Your email address will not be published. Required fields are marked *