mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-12-01 20:10:28 +00:00
Base: Add trigonometry demo webpage
This commit is contained in:
parent
f5dacfbb5b
commit
bf62625001
Notes:
sideshowbarker
2024-07-19 07:51:56 +09:00
Author: https://github.com/linusg Commit: https://github.com/SerenityOS/serenity/commit/bf62625001b Pull-request: https://github.com/SerenityOS/serenity/pull/1659
2 changed files with 39 additions and 0 deletions
38
Base/home/anon/www/trigonometry.html
Normal file
38
Base/home/anon/www/trigonometry.html
Normal 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>
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue