HTML and CSS Reference
In-Depth Information
Now, check out
Example 5-6
(
CH5EX6.html
from the code distribution). When you
run the code in a web browser, you should see 500 balls bounce around the canvas, as
shown in
Figure 5-7
. When you increase the width or height using the
range
controls,
they continue moving until they hit the new edge of the canvas. If you make the canvas
smaller, the balls will be contained within the smaller space. If you adjust the size too
rapidly, some balls will be lost off the canvas, but they will reappear when the canvas
is resized. Neat, huh?
Figure 5-7. Multiple balls bouncing while the canvas is resized on the fly
Example 5-6. Multiple ball bounce with dynamically resized canvas
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH5EX6: Multiple Ball Bounce With Resize</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
