HTML and CSS Reference
In-Depth Information
ship
.
y
+=
ship
.
velocityy
;
context
.
drawImage
(
shipImage
,
ship
.
x
,
ship
.
y
);
Youcanseethisexamplebyexecuting
CH5EX19.html
fromthecodedistribution,orbytyping
in the code listing shown in
Example 5-19
.
Example 5-19. Easing in (taking off)
<!doctype html>
<html
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH5EX19: Taking Off (Fake Ease In)
</title>
</title>
<
script src
=
"modernizr.js"
><
/script>
<
script type
=
"text/javascript"
>
window
.
addEventListener
(
'load'
,
eventWindowLoaded
,
false
false
);
var
var
shipImage
;
function
function
eventWindowLoaded
() {
shipImage
=
new
new
Image
();
shipImage
.
src
=
"ship.png"
shipImage
.
onload
=
eventAssetsLoaded
;
}
function
function
eventAssetsLoaded
() {
canvasApp
();
}
function
function
canvasSupport
() {
return
return
Modernizr
.
canvas
;
}
function
function
canvasApp
() {
iif
(
!
canvasSupport
()) {
return
return
;
}
var
new
Image
();
pointImage
.
src
=
"pointwhite.png"
;
function
var
pointImage
=
new
function
drawScreen
() {
context
.
fillStyle
=
'#000000'
;
context
.
fillRect
(
0
,
0
,
theCanvas
.
width
,
theCanvas
.
height
);
//Box
context
.
strokeStyle
=
'#ffffff'
;
