-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (102 loc) · 2.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>PixelFontCanvas - Test</title>
<script src="PixelFontCanvas.js"></script>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
margin: 10px;
touch-action: none;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
window.addEventListener('DOMContentLoaded', () => {
var canvas = document.getElementById('renderCanvas');
canvas.width = 640;
canvas.height = 480;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#303080";
ctx.fillRect(0,0,640,480);
PixelFontCanvas.loadFont('assets/', 'emulogic.fnt', (data) => {
PixelFontCanvas.drawText(
canvas,
"Score: 00005500",
{
font: 'Emulogic',
x: 20,
y: 20,
scale: 2,
width: 640,
align: 'left',
tint: '#FFFFFF'
}
);
PixelFontCanvas.drawText(
canvas,
"Hello World!\nThis is a test... 123",
{
font: 'Emulogic',
x: 0,
y: 50,
scale: 2,
width: 640,
align: 'center',
tint: '#FFFF00'
}
);
PixelFontCanvas.drawText(
canvas,
"WAVE 1 - GET READY!",
{
font: 'Emulogic',
x: 0,
y: 200,
scale: 5,
width: 640,
align: 'center',
tint: '#EEEEFF',
alpha: 0.5
}
);
PixelFontCanvas.drawText(
canvas,
"This is a long text, just to test how to break the text into a maximum width of 100 pixels. If this works, you will see many lines of text here. Do you like this text?",
{
font: 'Emulogic',
x: 20,
y: 60,
scale: 1,
width: 100,
align: 'left',
tint: '#802080'
}
);
PixelFontCanvas.drawText(
canvas,
"Low health!",
{
font: 'Emulogic',
x: 0,
y: 450,
scale: 1,
width: 640,
padding: 10,
align: 'right',
tint: '#FF0000'
}
);
});
});
</script>
</body>