HTML and CSS Reference
In-Depth Information
var tempAngle;
var tempRadius;
var tempRadians;
var tempXunits;
var tempYunits;
theCanvas = document.getElementById("canvasOne");
context = theCanvas.getContext("2d");
for (var i = 0; i < numBalls; i++) {
tempRadius = Math.floor(Math.random()*maxSize)+minSize;
tempX = tempRadius*2 + (Math.floor(Math.random()*theCanvas.width)-tempRadius*2);
tempY = tempRadius*2 + (Math.floor(Math.random()*theCanvas.height)-tempRadius*2);
tempSpeed = maxSpeed-tempRadius;
tempAngle = Math.floor(Math.random()*360);
tempRadians = tempAngle * Math.PI/ 180;
tempXunits = Math.cos(tempRadians) * tempSpeed;
tempYunits = Math.sin(tempRadians) * tempSpeed;
tempBall = {x:tempX,y:tempY,radius:tempRadius, speed:tempSpeed, angle:tempAngle,
xunits:tempXunits, yunits:tempYunits}
balls.push(tempBall);
}
setInterval(drawScreen, 33);
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
Multiple Balls Bouncing with a Dynamically Resized Canvas
Before we move on to some more complex interaction among balls, let's try one more
thing. Back in
Chapter 3
, we resized the canvas with some HTML5 form controls to
display text in the center of the canvas. Well, let's do the same thing now with the ball
example. This will give you a better idea of how we can make objects interact with a
dynamically resizing canvas.
First, in the HTML, we create two HTML5
range
controls, one for
width
and one for
height
, and set their maximum values to
1000
. We will use these controls to set the
width and height of the canvas at runtime:
