JAVASCRIPT code : Random Text Colors on Canvas , Random Button Colors using fillText, setfillStyle ,Math.random
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas><br>
<button id="colors" onclick="colors()" onmouseover="colors()" >COLORS </button>
<script>
function colors()
{
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
for(f=1; f<=10;f++)
{
x=Math.round(Math.random()*5);
switch(x)
{
case 0: c="red"; break
case 1: c="green";break
case 2: c="blue"; break
case 3: c="yellow";break
case 4: c="orange"; break
case 4: c="pur"; break
}
document.getElementById("colors").style.backgroundColor=c;
document.getElementById("colors").style.color="white";
document.getElementById("colors").style.width="200px";
document.getElementById("colors").style.height="100px";
ctx.font = "20px Georgia";
ctx.fillText("Hello World!", 10, 50);
ctx.font = "50px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(10, 50,canvas.width, 100);
gradient.addColorStop("0", c);
gradient.addColorStop("0.5", "black");
gradient.addColorStop("1.0", "white");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Big smile!", 10, 90);
}
}
</script>
</body>
</html>
Comments
Post a Comment