diff options
author | Linus Groh <mail@linusgroh.de> | 2020-04-05 22:24:45 +0100 |
---|---|---|
committer | Andreas Kling <kling@serenityos.org> | 2020-04-06 10:58:16 +0200 |
commit | bf62625001b5ea6cae74db4b588f81a1aa2d7648 (patch) | |
tree | 820aa54372e79a938c942c5bc374536b130b56e9 /Base | |
parent | f5dacfbb5bf52dd879e61d415756365d58f42e3e (diff) | |
download | serenity-bf62625001b5ea6cae74db4b588f81a1aa2d7648.zip |
Base: Add trigonometry demo webpage
Diffstat (limited to 'Base')
-rw-r--r-- | Base/home/anon/www/trigonometry.html | 38 | ||||
-rw-r--r-- | Base/home/anon/www/welcome.html | 1 |
2 files changed, 39 insertions, 0 deletions
diff --git a/Base/home/anon/www/trigonometry.html b/Base/home/anon/www/trigonometry.html new file mode 100644 index 0000000000..4651ff6240 --- /dev/null +++ b/Base/home/anon/www/trigonometry.html @@ -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>
\ No newline at end of file diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html index e07463e859..58c9311119 100644 --- a/Base/home/anon/www/welcome.html +++ b/Base/home/anon/www/welcome.html @@ -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> |