Base: Add trigonometry demo webpage

This commit is contained in:
Linus Groh 2020-04-05 22:24:45 +01:00 committed by Andreas Kling
parent f5dacfbb5b
commit bf62625001
Notes: sideshowbarker 2024-07-19 07:51:56 +09:00
2 changed files with 39 additions and 0 deletions

View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>Trigonometry</title>
<style type="text/css">
canvas {
border-width: 1px;
border-style: solid;
border-color: #000;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
var functions = ["sin", "cos", "tan"];
for (var i = 0; i < functions.length; ++i) {
var func = functions[i];
var canvas = document.getElementById(func);
var ctx = canvas.getContext("2d");
for (var x = 0; x < canvas.width; ++x) {
var y = -Math[func](x / 20) * canvas.height / 4 + canvas.height / 2;
ctx.fillStyle = "red";
ctx.fillRect(x-1, y-1, 2, 2);
ctx.fillStyle = "black";
ctx.fillRect(x, canvas.height / 2, 1, 1);
}
}
});
</script>
</head>
<body>
<h1>Sine</h1>
<canvas id="sin" width="300" height="100"></canvas>
<h1>Cosine</h1>
<canvas id="cos" width="300" height="100"></canvas>
<h1>Tangent</h1>
<canvas id="tan" width="300" height="100"></canvas>
</body>
</html>

View file

@ -28,6 +28,7 @@ span#ua {
<p>Your user agent is: <b><span id="ua"></span></b></p>
<p>Some small test pages:</p>
<ul>
<li><a href="trigonometry.html">canvas + trigonometry functions</a></li>
<li><a href="qsa.html">querySelectorAll test</a></li>
<li><a href="innerHTML.html">innerHTML property test</a></li>
<li><a href="position-absolute-top-left.html">position: absolute; for top and left</a></li>