Get Started

Get Started

• Download the minified library and include it in your html.

<script src="js/quark.base-1.0.0.js"></script>

• Create a context.

//create a DOMContext
var container = Quark.getDOM("container");
var domContext = new Quark.DOMContext({canvas:container});

//or create a CanvasContext
var container = Quark.getDOM("container");
var canvas = Quark.createDOM("canvas", {width:480, height:320, style:
{
    position:"absolute",
    backgroundColor:"#fff"
}});
container.appendChild(canvas);
var canvasContext = new Quark.CanvasContext({canvas:canvas});

• Create a Stage.

var stage = new Quark.Stage({width:480, height:320, context:canvasContext, update:function()
{
    //write your own update code here
}});

• Init a Timer and start it.

var fps = 60;
var timer = new Q.Timer(1000/fps);
timer.addListener(stage);
timer.start();

• Now you can create different types of display objects and add them onto stage.

var bmp = new Quark.Bitmap({image:imgElem, rect:[0,0,100,100], update:function()
{
    //update code here
}});
stage.addChild(bmp);