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):
04 |
< meta charset = "utf-8" /> |
05 |
< meta name = "author" content = "Script Tutorials" /> |
06 |
< title >HTML5 Radial Gradient | Script Tutorials</ title > |
08 |
< link href = "css/main.css" rel = "stylesheet" type = "text/css" /> |
10 |
< script src = "js/script.js" ></ script > |
13 |
< div class = "container" > |
14 |
< canvas id = "gradient" width = "500" height = "500" tabindex = "1" ></ canvas > |
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
02 |
function getAngleColor(angle) { |
04 |
if (angle < Math.PI * 2 / 5) { |
05 |
d = 255 / (Math.PI * 2 / 5) * angle; |
06 |
color = '255,' + Math.round(d) + ',0' ; |
07 |
} else if (angle < Math.PI * 4 / 5) { |
08 |
d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 2 / 5); |
09 |
color = (255 - Math.round(d)) + ',255,0' ; |
10 |
} else if (angle < Math.PI * 6 / 5) { |
11 |
d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 4 / 5); |
12 |
color = '0,255,' + Math.round(d); |
13 |
} else if (angle < Math.PI * 8 / 5) { |
14 |
d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 6 / 5); |
15 |
color = '0,' +(255 - Math.round(d)) + ',255' ; |
17 |
d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 8 / 5); |
18 |
color = Math.round(d) + ',0,' + (255 - Math.round(d)) ; |
24 |
var iSectorAngle = (360 / iSectors) / 180 * Math.PI; |
26 |
function drawGradient() { |
28 |
var canvas = document.getElementById( 'gradient' ); |
29 |
var ctx = canvas.getContext( '2d' ); |
31 |
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); |
35 |
ctx.translate(canvas.width / 2, canvas.height / 2); |
37 |
for ( var i = 0; i < iSectors; i++) { |
40 |
var endAngle = startAngle + iSectorAngle; |
42 |
var radius = (canvas.width / 2) - 1; |
44 |
var color = getAngleColor(iSectorAngle * i); |
48 |
ctx.arc(0, 0, radius, startAngle, endAngle, false ); |
51 |
ctx.strokeStyle = 'rgb(' +color+ ')' ; |
54 |
ctx.fillStyle = 'rgb(' +color+ ')' ; |
57 |
ctx.rotate(iSectorAngle); |
63 |
if (window.attachEvent) { |
64 |
window.attachEvent( 'onload' , drawGradient); |
67 |
var curronload = window.onload; |
68 |
var newonload = function () { |
72 |
window.onload = newonload; |
74 |
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!