Monday, 25 February 2013

EaselJS: How to add a script and a circle to the stage

1) This is the doctype declaration for an html5 page.

2) This is how you tell the html page to access the library of EaselJS, and use it's functions. The filepath is relative to the location of the htmlfile itself, so make sure you know how to find a file, relative to your file.

3) You then add another script tag that contains your code. This will contain the initial function that is called when the page loads.

4) The body tag has an onLoad event, you use this to call your initial function.

5) The canvas tag is where you can actually draw stuff. The id attribute is used by the script to identify the tag. Multiple canvases can be added to the document, just give them each a unique id. I'm told that you can even overlap canvases on top of each other and use them as layers!

6) I have declared the stage variable (which will hold the canvas tag) oustide of any functions, so that all functions can access the stage.

7) This connects the stage variable to the canvas tag.

8) Adds the circle object to the stage, so it exists on stage, but it will not be visible until you update the stage.

9) Updates the stage, so you can see what it really looks like. If you don't update the stage, it is possible for things to be moving around, but you can't see it happening.

No comments:

Post a Comment

Please enter your message here...