Make a HTML5 Canvas Colorful Tile Board Part II
So last time we created a HTML 5 Canvas TileBoard in javascript. But it was not so flexible and we were not able to control it properly. So Lets develop this project it little more.
THE IDEA
2) User can Change the Background color of the Board
2) User can assign a single color to some specific tiles
3) User can clear the Canvas Completely (Just for fun).
THE IMPLEMENTATION
Lets Make the Background color Chooser First, we can implement it with HTml5 Color Chooser
So add this Code to your Html File.
Create a new function for drawing Backgorund
Call this Function in Draw() Before Calling the TileMaker........
This was easy right we just drawn a rectangle to draw the backgorund
Next we are going to make another color chooser for Single color tiles.
then we are Going to make a range slider to control the influence on the color tiles and a an
element ti show the numbere of tiles influenced.
element ti show the numbere of tiles influenced.
Now lets add functionality to it......we are going to make a function range slider which will pass some values to the tilemaker function.Hence we are going to make some changes to the Tile maker Function.....
Now in the end we are going to make that clear button.
Lets add functionality to it
The Full Source Code Is available below.....,
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="main.js" type="text/javascript"></script>
</head>
<body >
<div>
<Canvas width="600" height="400" id="Can" ></Canvas>
</div>
<div>
<button onclick="Draw()">Draw</button>
<button onclick="Clear()">Clear</button>
<br>
<span id="CheckingRX"></span>
<br>
<input type="color" value="#ff0000" id="ColorChooserBG">
<Br>
<input type="range" id="RangeX" oninput="DrawRange(this.value)" max="50"/>
<br>
<input type="color" value="#ff0000" id="ColorChooser">
</div>
<script>
var can = document.getElementById("Can");
var ct = can.getContext("2d");
var CordinateX = 0;
var CordinateY = 0;
function Draw()
{ drawBG();
// Remember To deactivate it ct.clearRect(0,0,can.width,can.height);
Tilemaker(ct,CordinateX,CordinateY,60,40);
}
function Clear()
{
ct.clearRect(0,0,can.width,can.height);
}
function DrawRange(rangex,Drawbg)
{ drawBG();
TileColor = document.getElementById("ColorChooser").value;
document.getElementById("CheckingRX").innerHTML=" Columns Affected: "+rangex;
Tilemaker(ct,CordinateX,CordinateY,60,40,TileColor,rangex);
}
function drawBG()
{
ct.fillStyle = document.getElementById("ColorChooserBG").value;
ct.fillRect(0,0,Can.width,Can.height);
}
</script>
</body>
</html>
And the Tile maker Function
var Color = '#';
var Tilemaker = function(c,CordX,CordY,maxx,maxy,COLOR,rangex)
{
var colorarr = ['1','2','3','4','5','6','7','8','9','0','a','b','c','d','e','f'];
//For Row
for (var i = 0; i < maxy; i++) {
//For Drawing
for (var j = 0; j < maxx; j++)
{
this.width = 10;
this.height = 10;
var random = Math.floor(Math.random()*16);
//For Color Genration
for(var k =0;k<6;k++)
{
var random = Math.floor(Math.random()*16);
Color = Color+colorarr[random];
}
//For Color Chosing
if(rangex !== undefined)
{
if(j > rangex-1)
{
c.fillStyle = Color;
}
else
{
c.fillStyle = COLOR;
}
}
else
{
c.fillStyle = Color;
}
c.fillRect(CordX,CordY,this.width,this.height);
CordX = CordX+this.width+2;
Color ='#';
}
CordX = 0;
CordY = CordY+this.height+2;
}
};
Here is the end result.....................,
Please Comment your thoughts below...........also share this post if you like it.
Comments
Post a Comment