HTML and CSS Reference
In-Depth Information
Because we have moved almost all the code out of the HTML file, here is our “almost” bare-
bones HTML file that starts the drag-and-drop application.
We need to include all the files we just created:
< script type = "text/javascript" src = "EventDispatcher.js" >< /script>
< script type = "text/javascript" src = "DisplayList.js" >< /script>
< script type = "text/javascript" src = "GameUtilities.js" >< /script>
< script type = "text/javascript" src = "DragAndDrop.js" >< /script>
< script type = "text/javascript" src = "Ornament.js" >< /script>
< script type = "text/javascript" src = "modernizr.js" >< /script>
We need to create the canvas in HTML. For this application, we will center it on the screen:
<div align= "center" >
<canvas id= "canvasOne" width= "640" height= "480" style= "cursor: default;" >
Your browser does not support the HTML 5 Canvas.
Finally, we need to start the app when the window has loaded:
< script type = "text/javascript" >
window . addEventListener ( "load" , eventWindowLoaded , false
false );
function eventWindowLoaded () {
DragAndDrop ();
< /script>
We have now created a very simple object-oriented structure for a Canvas application. With
this application, we have attempted to solve some glaring application development issues that
occur when creating Canvas applications. We have created a way to subscribe to and broad-
cast events from logical objects on the canvas, a way to find and click on individual objects
on the canvas, and we keep track of those objects using a display list that simulates “retained
mode.” While there are many ways this object model could be improved, we feel that this is a
good starting point for your future endeavors with the HTML5 Canvas.
You can test this example by finding dragandrop.html in the code distribution (in the
Chapter 11 /draganddrop folder) and opening it in your web browser.
Search WWH ::

Custom Search