<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
<meta name="author" content="HTML code: Peter Forster; e-mail: pforster@nikko.ch"; />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script>
<!-- //commenti -->
function Grad5a() { <!--//nome della funzione di calcolo-->
<!-- //entrate dei sei colori con alternative in caso di "vuoto": if (... -->
f_hex = document.getElementById('f_hex').value; if (f_hex=="") {f_hex='ffffff'};
a1_hex = document.getElementById('a1_hex').value; if (a1_hex=="") {a1_hex='888888'};
a2_hex = document.getElementById('a2_hex').value; if (a2_hex=="") {a2_hex='000000'};
a3_hex = document.getElementById('a3_hex').value; if (a3_hex=="") {a3_hex='000000'};
a4_hex = document.getElementById('a4_hex').value; if (a4_hex=="") {a4_hex='888888'};
l_hex = document.getElementById('l_hex').value; if (l_hex=="") {l_hex='ffffff'};
<!-- //riferimento alla "lavagna" canvas e definizione per bidimensionale -->
var c = document.getElementById('Grad5a');
var ctx=c.getContext("2d");
<!-- //calcolo tipo (lineare) e orientamento (4 coordinate da... a...) del gradiente -->
grd=ctx.createLinearGradient(0,30,420,30);
<!-- //elementi del gradiente: inizio (da 0.0 ... 1.0) e colore '#'+... -->
grd.addColorStop(0.0,'#'+ f_hex);
grd.addColorStop(0.20,'#'+ a1_hex);
grd.addColorStop(0.40,'#'+ a2_hex);
grd.addColorStop(0.60,'#'+ a3_hex);
grd.addColorStop(0.80,'#'+ a4_hex);
grd.addColorStop(1.0,'#'+l_hex);
<!-- //definizione dell'uscita: stile (gradiente), forma (rettangolo), orient. (da... a...)-->
ctx.fillStyle=grd;
ctx.fillRect(0,0,420,420);
return;
}
</script>
</head>
<body>
<form id="gradient" style="border:1px solid navy; width:450px; background-color:#eeeeff; color:navy; padding:5px;">
<div align="center">
<!--caselle d'entrata dati-->
<input type="Text" name="f_hex" id="f_hex" size="6" value="" placeholder="f_hex" style="color:#ff0000; width:60px; font-size:; font-weight:" onblur="Grad5a();">
<input type="Text" name="a1_hex" id="a1_hex" size="6" value="" placeholder="a1_hex" style="color:#ff0000; width:60px; font-size:; font-weight:" onblur="Grad5a();">
<input type="Text" name="a2_hex" id="a2_hex" size="6" value="" placeholder="a2_hex" style="color:#ff0000; width:60px; font-size:; font-weight:" onblur="Grad5a();">
<input type="Text" name="a3_hex" id="a3_hex" size="6" value="" placeholder="a3_hex" style="color:#ff0000; width:60px; font-size:; font-weight:" onblur="Grad5a();">
<input type="Text" name="a4_hex" id="a4_hex" size="6" value="" placeholder="a4_hex" style="color:#ff0000; width:60px; font-size:; font-weight:" onblur="Grad5a();">
<input type="Text" name="l_hex" id="l_hex" size="6" value="" placeholder="l_hex" style="color:#ff0000; width:60px; font-size:; font-weight:" onblur="Grad5a();"><br />Gradiente tra sei colori<br />
<!--casella (banda) d'uscita risultato con nota se il browser non lo dovesse interpretare-->
<canvas id ="Grad5a" width=420 height=30 style="border:3px solid white;">il Suo browser non interpreta html5 canvas</canvas><br /><span style="font-size:9px;">Cc by P. Forster 3.0-it 150322</span>
</div>
</form>
</body>
</html>