HTML and CSS Reference
In-Depth Information
context
.
drawImage
(
shipImage
,
ship
.
x
,
ship
.
y
);
}
var
var
easeValue
=
.
05
;
var
var
p1
=
{
x
:
240
,
y
:-
20
};
var
var
p2
=
{
x
:
240
,
y
:
470
};
var
var
ship
=
{
x
:
p1
.
x
,
y
:
p1
.
y
,
endx
:
p2
.
x
,
endy
:
p2
.
y
,
velocityx
:
0
,
velocityy
:
0
};
var
var
points
=
new
new
Array
();
theCanvas
=
document
.
getElementById
(
"canvasOne"
);
context
=
theCanvas
.
getContext
(
"2d"
);
function
function
gameLoop
() {
window
.
setTimeout
(
gameLoop
,
20
);
drawScreen
()
}
gameLoop
();
}
<
/script>
</head>
</head>
<body>
<body>
<div
<div style=
"position: absolute; top: 50px; left: 50px;"
>
<canvas
<canvas id=
"canvasOne"
width=
"500"
height=
"500"
>
Your browser does not support HTML5 Canvas.
</canvas>
</canvas>
</div>
</div>
</body>
</body>
</html>
</html>
NOTE
We are showing the points in this example, but because the background is black, we load in a white
bitmap point image named
pointwhite.png
instead of the all-black image,
point.png
.
