HTML and CSS Reference
In-Depth Information
Our Basic Game HTML5 File
Before we start to develop our arcade game, let's look at
Example 8-1
,
the most basic HTML
file we will use in this chapter (
CH8EX1.html
). We'll start by using the basic HTML5 tem-
plate we defined in
Chapter 1
. Our canvas will be a 200×200 square.
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH8EX1: Filled Screen With Some Text
</title>
</title>
<
script type
=
"text/javascript"
>
window
.
addEventListener
(
'load'
,
eventWindowLoaded
,
false
false
);
function
function
eventWindowLoaded
() {
canvasApp
();
}
function
function
canvasApp
(){
var
var
theCanvas
=
document
.
getElementById
(
"canvas"
);
iif
(
!
theCanvas
|| !
theCanvas
.
getContext
) {
return
return
;
}
var
var
context
=
theCanvas
.
getContext
(
"2d"
);
iif
(
!
context
) {
return
return
;
}
drawScreen
();
function
function
drawScreen
() {
context
.
fillStyle
=
'#aaaaaa'
;
context
.
fillRect
(
0
,
0
,
200
,
200
);
context
.
fillStyle
=
'#000000'
;
context
.
font
=
'20px sans-serif'
;
context
.
textBaseline
=
'top'
;
context
.
fillText
(
"Canvas!"
,
0
,
0
);
}
}
<
/script>
</head>
</head>
<body>
<body>
<div
<div style=
"position: absolute; top: 50px; left: 50px;"
>
<canvas
<canvas id=
"canvas"
width=
"200"
height=
"200"
>
Your browser does not support HTML5 Canvas.
</canvas>
</canvas>
</div>
</div>
