-
Notifications
You must be signed in to change notification settings - Fork 0
/
water-render.html
44 lines (44 loc) · 1.25 KB
/
water-render.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
<!DOCTYPE html>
<html>
<head>
<title>Water Render</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<style>
body {background-color: #222; position: relative; left: 10px; width: 90vw; height: 90vh;}
a, div, h1, label, p, span, strong {color: #fff; font-family: verdana;}
#fill {width: 500px;}
span {position: relative; bottom: 6px;}
</style>
</head>
<body>
<h1>Water Render</h1>
<p>Render a glass of water using the HTML Canvas.</p>
<input type="range" id="fill" min=0 max=1 step=0.002>
<span id="ml"></span>
<span> mL<br></span>
<canvas id="myCanvas" width="250" height="400"></canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
setInterval(function() {
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillStyle = "#0bf";
function drawWaterLine(y, width) {
ctx.fillRect(125 - width / 2, y, width, 2)
}
for (i = 0; i < fill.value * 174; i++) {
drawWaterLine(372 - i * 2, 150 + i / 3.75);
}
ctx.strokeStyle = "#fff";
ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(50, 375);
ctx.lineTo(200, 375);
ctx.lineTo(225, 25);
ctx.lineWidth = 2;
ctx.stroke();
ml.innerHTML = Math.round(fill.value * 500);
});
</script>
</body>
</html>