Javascript Code : Random Display of Shapes with Different Colors using fillRect , clearRect, For Loop , Styling Buttons using Javascript
<!DOCTYPE html>
<html>
<head>
<title> Javascript Code : Random Display of Shapes with Different Colors using fillRect , clearRect, For Loop , Styling Buttons using Javascript </title>
</head>
<body>
<canvas id="myCanvas" width="1000" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas><br>
Count the shapes
<input type="number" id="answer" > </input>
<button id="colors" onclick="colors()" onmouseover="colors()" >COLORS </button>
<button id="eraser" onclick="eraser()" onmouseover="eraser()" >Next </button>
<script>
function colors()
{
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
x=Math.round(Math.random()*10+1);
var score=0;
for(f=1; f<=x;f++)
{
switch(f)
{
case 1: c="red"; break
case 2: c="green";break
case 3: c="blue"; break
case 4: c="yellow";break
case 5: c="orange"; break
case 6: c="purple"; break
case 7: c="yellowgreen"; break
case 8: c="hotpink"; break
case 9: c="aqua"; break
case 10: c="gray"; break
} //switch
document.getElementById("colors").style.backgroundColor=c;
document.getElementById("colors").style.color="white";
document.getElementById("colors").style.width="150px";
document.getElementById("colors").style.height="80px";
document.getElementById("eraser").style.backgroundColor=c;
document.getElementById("eraser").style.color="white";
document.getElementById("eraser").style.width="150px";
document.getElementById("eraser").style.height="80px";
ctx.font = "20px Calibri";
// Create gradient
ctx.fillText("Lets Count", 10, 90);
ctx.fillStyle=c;
ctx.fillRect(10+f*100,100, 50, 50);
} //for loop
} //function
function eraser()
{
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,1000,200);
colors();
}
colors()
</script>
</body>
</html>
Count the shapes
Comments
Post a Comment