-
Notifications
You must be signed in to change notification settings - Fork 6
/
custom-font.html
49 lines (43 loc) · 1.46 KB
/
custom-font.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<style>
body, canvas {
margin: 0;
}
canvas {
display: block;
}
</style>
<canvas id="canvas"></canvas>
<script type="module">
import matrix from './src/matrix.js';
const font = new FontFace('matrix', 'url(./Matrix-Code.ttf)');
font.load().then(font => {
document.fonts.add(font);
const make_chars = (...nums) => {
return nums.map(num => String.fromCharCode(num));
};
const nums = [0x25AA, 0x254C, 0x00A9, 0x00A6, 0x007C, 0x007A, 0x003E, 0x003C, 0x003A, 0x0022, 0x002A, 0x002B,0x30A2,0x30A6,0x30A8,0x30AA,0x30AB,0x30AD,0x30B1,0x30B3,0x30B5,0x30B7,0x30B9,0x30BB,0x30BD,0x30BF,0x30C4,0x30C6,0x30CA,0x30CB,0x30CC,0x30CD,0x30CF,0x30D2,0x30DB,0x30DE,0x30DF,0x30E0,0x30E1,0x30E2,0x30E4,0x30E8,0x30E9,0x30EA,0x30EF,0x30FC, 0xA78A, 0xE937];
// '6' don't have its glyph
const digits = matrix.range(0x0030, 0x0035).concat(matrix.range(0x0037, 0x0039));
const chars = digits.concat(make_chars(...nums));
let click_handler;
matrix(canvas, {
exit: false,
chars,
font: 'matrix',
font_size: 20,
mount(matrix) {
click_handler = () => matrix.fullscreen();
canvas.addEventListener('click', click_handler);
},
unmount() {
canvas.removeEventListener('click', click_handler);
}
});
});
</script>