wasm_webgl2/index.html at master · qwikdraw/wasm_webgl2 · GitHub

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
<!DOCTYPE html>
<html class="H(100%) M(0) Bxz(bb)">

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
	<style>
	*,*:before,*:after{-moz-box-sizing:inherit;box-sizing:inherit}
	.Bxz\(bb\){box-sizing:border-box}.D\(b\){display:block}.H\(100\%\){height:100%}
	.M\(0\){margin:0}.P\(0\){padding:0}.Pos\(a\){position:absolute}
	.W\(100\%\){width:100%}.Z\(0\){z-index:0}.Z\(1\){z-index:1}
	</style>
	<link rel="preload" href="assets/circle.svg" as="image">
	<link rel="preload" href="assets/square.svg" as="image">
	<link rel="preload" href="index.wasm" as="fetch">
	<link rel="preload" href="index.data" as="fetch">
	<script async src="/index.js"></script>
</head>

<body id="body" class="H(100%) M(0)">
	<img hidden id="circle" src="/assets/circle.svg" />
	<img hidden id="square" src="/assets/square.svg" />
	<canvas id="gl" class="M(0) P(0) Pos(a) H(100%) W(100%) D(b) Z(0)"></canvas>
	<canvas id="ui" class="M(0) P(0) Pos(a) H(100%) W(100%) D(b) Z(1)" tabindex=1 ></canvas>
	<script>
	(()=>{
	const gl = document.getElementById("gl");
	gl.width = window.innerWidth;
	gl.height = window.innerHeight;
	const ui = document.getElementById("ui");
	ui.width = window.innerWidth;
	ui.height = window.innerHeight;
	window.resize_timer = 0;
	window.addEventListener("resize", () => {
		clearTimeout(window.resize_timer);
		window.resize_timer = setTimeout(() => {
			gl.width = window.innerWidth;
			gl.height = window.innerHeight;
			ui.width = window.innerWidth;
			ui.height = window.innerHeight;
		}, 500);
	});
	})();
	</script>
</body>
</html>