HTML and CSS Reference
In-Depth Information
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="320">
Your browser does not support HTML5 Canvas.
</canvas>
<div id="inputForm" style="display:none;">
<form>
<input id="textBox" placeholder="your text" />
<input type="button" id ="sendChat" value="Send"/>
</form>
</div>
</div>
</body>
</html>
Further Explorations with ElectroServer
Displaying text on HTML5 Canvas is interesting, but as we have shown you in this
topic, you can do much more. Let's add some graphics to the previous demo. We have
added a second application for you to peruse, named
CH11EX3.html
. This application
adds the bouncing ball demo app from
Chapter 5
to the chat application we just created.
It allows chatters to “send” bouncing balls to each other by clicking on the canvas.
The heart of the app is simply another use of the
EsObject
from the chat application,
which is created when the user clicks on the canvas. This
EsObject
adds information
about a
ball
that one user created for the others in the room:
function eventMouseUp(event) {
var mouseX;
var mouseY;
if (event.layerX || event.layerX == 0) { // Firefox
mouseX = event.layerX ;
mouseY = event.layerY;
} else if (event.offsetX || event.offsetX == 0) { // Opera
mouseX = event.offsetX;
mouseY = event.offsetY;
}
ballcounter++;
var maxSize = 8;
var minSize = 5;
var maxSpeed = maxSize+5;
var tempRadius = Math.floor(Math.random()*maxSize)+minSize;
var tempX = mouseX;
var tempY = mouseY;
var tempSpeed = maxSpeed-tempRadius;
var tempAngle = Math.floor(Math.random()*360);
var tempRadians = tempAngle * Math.PI/ 180;
var tempvelocityx = Math.cos(tempRadians) * tempSpeed;
var tempvelocityy = Math.sin(tempRadians) * tempSpeed;
var pmr = new PublicMessageRequest();
