|
Setup
How do I get started?
Required filesThe jQuery Canvas Kit is very easy implement. To start, you need to include the requisite libraries:
...and all files associated with those. Please see the jQuery site (www.jquery.com) for information regarding those libraries. These libraries are distributed in the .ZIP packages for each JCK release for convenience. Once you have included these files in your document, you will need to include jckstyle.css and jck.js. InitializationTo extend a canvas with the JCK functionality you need to call this function: jck(canvasElement [options]); I'll explain the options in a moment. The "canvasElement" is a reference to an HTML 5 canvas element, however you created it. A handy way to to JCK-ify all of the canvases on the document at once is with this jQuery snippet: $(document).ready(function(){
$("canvas").each(function(){
jck(this);
});
});When the document loads, jQuery will traverse the entire DOM and pass each canvas element through the jck() function. Optional parametersThere are a number of options that can either be set upon initialization or afterwards. To set the options (explained momentarily), use this syntax: jck(this,
{
[options.option1 : value1,]
[options.option2 : value2,]
...
});And so on. The options are as follows:
Changing most of these options after the initialization time won't have an effect. This is going to be addressed in a future revision. Defining height and widthOne thing you may want to do right off the bat with your canvas is specify a height and width. You could certainly modify the standard height and width canvas properties, but the problem with that is that DOM height and width canvas properties do not correlate to the CSS height and width values. To change all of the appropriate values simultaneously and keep everything in sync, use canvas.getHeight() and canvas.setHeight() to modify/evaluate the canvas's height, and canvas.getWidth() and canvas.setWidth() for the width. Now what?You're probably going to want to do something with your newly kitted canvas. A good next step is understanding and defining your run loop. |