html5 gradient,HTML5 Radial Gradient

HTML5 Radial Gradient

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.

If you are ready – let’s start!

Step 1. HTML

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

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).

[sociallocker]

[/sociallocker]

Conclusion

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