HTML and CSS Reference
In-Depth Information
$(window).bind('orientationchange',function() {
setTimeout(function() { window.scrollTo(0,1); }, 0);
});
return Q;
};
Q.clear = function() {
Q.ctx.clearRect(0,0,Q.el[0].width,Q.el[0].height);
};
This setup code performs a simple task but has some complications because it tries to accommodate different
usage patterns:
setup
can be called with no parameters, with an
id
of an element, or with the element itself.
If no
id
is passed in, the engine defaults to using an id of
quintus
. If it can't find an element, it creates a new
<canvas>
element. It then creates a wrapper element used to center the element on the page by default with
a size of 320 x 420, enough to fill up an iPhone screen. Finally, it checks for a
getContext
method on the
object, and if it finds one, it grabs the
2d
context and stores it in
Q.ctx
for later use.
The method also accepts an options hash with an optional
maximize
option that resizes the main element
to match the screen. The screen maximization techniques to remove the address bar from Chapter 6 are added
for touch devices. When maximizing, the method also accepts optional
maxWidth
,
maxHeight
,
res-
ampleWidth
, and
resampleHeight
parameters. The first two set a maximum width and height for the
game and the second two set an optional width and height at which to resample down by half on mobile devices.
The method also returns the
Q
object, allowing to be chained with further calls on Quintus if necessary.
The
clear
method is much simpler and just clears the entirety of the Canvas.
To try this simple functionality out, open an HTML file called
canvas_test.html
and put in the HTML in
Listing 10-2:
Canvas test example
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Canvas Test</title>
<meta charset="UTF-8">
<script src='jquery.min.js'></script>
<script src='underscore.js'></script>
<script src='quintus.js'></script>
</head>
<body>
<script>
var Q = Quintus().setup();
Q.el.css('backgroundColor','red');
</script>
</body>
</html>
