Creating Simple Graphics Program in PHP

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>&nbsp;</td>" +

            "<td>&nbsp;</td>" +

            "<td>&nbsp;</td>" +

            "<td>&nbsp;</td>" +

            "<td>&nbsp;</td>" +

            "<td>&nbsp;</td>" +

            "<td>&nbsp;</td>" +

            "<td>&nbsp;</td>" +

            "<td>&nbsp;</td>" +

            "<td>&nbsp;</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);">&nbsp;</td>

<td style="background-color: rgb(119, 119, 119);">&nbsp;</td>

<td style="background-color: rgb(255, 255, 255);">&nbsp;</td>

<td style="background-color: rgb(255, 0, 0);">&nbsp;</td>

<td style="background-color: rgb(0, 255, 0);">&nbsp;</td>

<td style="background-color: rgb(0, 0, 255);">&nbsp;</td>

<td style="background-color: rgb(255, 255, 0);">&nbsp;</td>

</tr>

</table>

<p><strong>Draw!</strong></p>

<table id="grid" cellspacing="0">

</table>

<p><em>Debug console:&nbsp;</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