mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
39 lines
1.3 KiB
HTML
39 lines
1.3 KiB
HTML
<!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>
|