Add a button to your program from Exercise 13.3 to erase the entire drawing wind
ID: 671090 • Letter: A
Question
Add a button to your program from Exercise 13.3 to erase the entire drawing window.
Exercise 13.3//
<html>
<head>
<title>Simple Drawing Program</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>
<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. Hold <tt>alt</tt> to erase.</th></tr>
</tbody></table>
</body>
</html>
Explanation / Answer
>>>>Clear button :
class ClearButton extends Button
{
ClearButton(MouseTest mt)
{
super("Clear");
addActionListener(mt);
}
}
>>>Example program for canvas:
<html>
<head>
<style>
body
{
margin: 0px;
padding: 0px;
}
#buttons
{
position: absolute;
top: 5px;
left: 10px;
}
#buttons > input
{
padding: 10px;
display: block;
margin-top: 5px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<div id="buttons">
<input type="button" id="clear" value="Clear">
</div>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 4;
context.strokeStyle = 'red';
context.stroke();
document.getElementById('clear').addEventListener('click', function()
{
context.clearRect(0, 0, canvas.width, canvas.height);
}, false);
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.