I want to add an erase feature to the following drawing program.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type = "text/css">
#canvas { width: 400px;
border: 1px solid #999999;
border-collapse: collapse }
td { width: 4px;
height: 4px }
th.key { font-family: arial, helvetica, sans-serif;
font-size: 12px;
border-bottom: 1px solid #999999 }
</style>
<script type = "text/javascript">
<!--
function createCanvas ()
{
var side = 100;
var tbody = document.getElementById( "tablebody" );
for(var i =0; i < side; i++)
{
var row = document.createElement( "tr" );
for(var j=0; j < side; j++)
{
var cell = document.createElement ( "td");
cell.onmousemove = processMouseMove;
row.appendChild( cell );
}
tbody.appendChild ( row );
}
}
function processMouseMove( e )
{
if( !e )
var e = window.event;
if( e.ctrlKey )
this.style.backgroundColor = "blue";
if( e.shiftKey )
this.style.backgroundColor = "red";
if( e.altKey )
this.style.backgroundColor = "white";
}
// -->
</script>
</head>
<body onload = "createCanvas()">
<table id = "canvas" class = "canvas"><tbody id = "tablebody">
<tr><th class = "key" colspan = "100">Hold <tt>ctrl</tt>
to draw blue. Hold <tt>shift</tt> to draw red. </th></tr>
</tbody></table>
</body>
</html>
20 Mar, 2008 - 09:42 PM
|