101 lines
1.9 KiB
HTML
101 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style type="text/css">
|
|
* {
|
|
-webkit-user-select: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body, html, #canvas {
|
|
width: 100%; height: 100%;
|
|
overflow: hidden;
|
|
margin: 0; padding: 0;
|
|
font-family: sans-serif;
|
|
|
|
color: white;
|
|
/*text-shadow: white 0 0 5px;*/
|
|
}
|
|
|
|
.info {
|
|
position: absolute;
|
|
top: calc(50% - 65px);
|
|
left: 0; right: 0;
|
|
|
|
font-size: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.disclaim {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0; right: 0;
|
|
|
|
text-align: center;
|
|
font-size: 20px;
|
|
padding: 5px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas" width="100%"></canvas>
|
|
<div class="info">
|
|
Use the pane on the left<br>
|
|
to cycle through demos
|
|
</div>
|
|
|
|
<div class="disclaim">
|
|
This room uses large,<br>
|
|
animated pages which is not<br>
|
|
recommended for slower computers.<br>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var canvas = document.getElementById('canvas');
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
canvas.width = document.body.offsetWidth;
|
|
canvas.height = document.body.offsetHeight;
|
|
ctx.fillStyle = "rgba(127, 127, 127, 1)";
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
function renderMouse(ev) {
|
|
ctx.fillStyle = "rgba(127, 127, 127, .02)";
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
var r = 0;
|
|
var g = 0;
|
|
var b = 0;
|
|
if (ev.buttons & 1) r = 255;
|
|
if (ev.buttons & 2) g = 255;
|
|
if (ev.buttons & 4) b = 255;
|
|
ctx.fillStyle = `rgba(${r}, ${g}, ${b}, 1)`;
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(
|
|
ev.x, ev.y,
|
|
70,
|
|
0, 2 * Math.PI
|
|
);
|
|
ctx.fill();
|
|
|
|
ctx.fillStyle = "rgba(127, 127, 127, 1)";
|
|
ctx.beginPath();
|
|
ctx.arc(
|
|
ev.x, ev.y,
|
|
20,
|
|
0, 2 * Math.PI
|
|
);
|
|
ctx.fill();
|
|
};
|
|
|
|
document.body.addEventListener("mousemove", renderMouse);
|
|
document.body.addEventListener("mousedown", renderMouse);
|
|
document.body.addEventListener("mouseup", renderMouse);
|
|
document.body.addEventListener("contextmenu", ev => {
|
|
ev.preventDefault();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |