Introduction
In this article I will explain how to create a simple graphics program using PHP. We will build a simple drawing application out of a palette of colors, a grid of HTML table cells, and jQuery. I will add the ability to save and load our image using PHP and Ajax. Using graphics to manipulate the background color of the table.
Example
<html>
<head>
<title>Drawing Grid Example of Graphics</title>
<style type="text/css">
#grid, #palette{
padding: 0px;
margin: 0px;
border-collapse: collapse;
}
#palette td, #grid td{
width: 20px;
height: 20px;
}
#grid td{
border: 1px solid #cccccc;
}
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" >
</script>
<script type="text/javascript">
$(document).ready(function () {
//10 by 10 grid
for (i = 0; i < 8; ++i) {
$("#grid").append(
"<tr>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"</tr>"
);
}
var active_color = "rgb(0, 0, 0)";
$("#palette td").each(
function (index) {
//set the onClick event
$(this).bind(
"click",
function () {
active_color = $(this).css("background-color");
$("#debug_palette_color").html("active palette color is: " +
"<span style='width: 20px; height: 20px; background-color:"
+ active_color
+ ";'>" + active_color + "</span>");
}
);
});
$("#grid td").each(
function (index) {
//bind the onClick event
$(this).bind(
"click",
function () {
$(this).css("background-color", active_color);
}
);
});
});
</script>
</head>
<body>
<p><strong>Palette</strong></p>
<table id="palette">
<tr>
<td style="background-color: rgb(0, 0, 0);"> </td>
<td style="background-color: rgb(119, 119, 119);"> </td>
<td style="background-color: rgb(255, 255, 255);"> </td>
<td style="background-color: rgb(255, 0, 0);"> </td>
<td style="background-color: rgb(0, 255, 0);"> </td>
<td style="background-color: rgb(0, 0, 255);"> </td>
<td style="background-color: rgb(255, 255, 0);"> </td>
</tr>
</table>
<p><strong>Draw!</strong></p>
<table id="grid" cellspacing="0">
</table>
<p><em>Debug console: </em></p>
<div id="debug_palette_color"></div>
</body>
</html>
Output
![g1.jpg]()
We set our grid cells to a click event, so that after any click event the background-color is changed to our active color. You can set this drawing to our click event.
![g2.jpg]()