-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgraph.html
73 lines (71 loc) · 2.49 KB
/
graph.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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./dist/unitary.js"></script>
<script src="./dist/canvas.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(function($) {
const canvas = new Canvas('graph');
canvas.origin = new Unitary.Point(100, 20);
canvas.draw();
let fx = $('#function').val();
let isChanged = false;
const setFx = _fx =>
() => {
fx = _fx;
draw();
};
$('#draw').on('click', draw);
$('#scale').on('input', function() {
console.log();
draw();
});
$('#function').on('input', function() {isChanged = true;});
function draw() {
var scale = $('#scale').val();
if (isChanged) {
fx = $('#function').val();
isChanged = false;
}
canvas.clear();
canvas.removeAllObjects();
canvas.add(Unitary.XAxis);
canvas.add(Unitary.YAxis);
canvas.add(new Unitary.Text('1', new Unitary.Point(1 , 1 * scale)));
canvas.add(new Unitary.Text('1', new Unitary.Point(1 * scale, 1)));
canvas.add(new Unitary.Graph(new Function('x', 'return ' + fx), scale));
canvas.draw();
}
draw();
$('#line').on('click', setFx('x'));
$('#quadraticFunction').on('click', setFx('x*x'));
$('#exponentialFunction').on('click', setFx('Math.exp(x)'));
$('#logarithmFunction').on('click', setFx('Math.log(x)'));
$('#sinFunction').on('click', setFx('Math.sin(x)'));
$('#cosFunction').on('click', setFx('Math.cos(x)'));
$('#tanFunction').on('click', setFx('Math.tan(x)'));
});
</script>
<style>
canvas {
border: 3px solid #000;
}
</style>
</head>
<body>
<canvas id="graph" width="200" height="200"></canvas><br>
Scale: <input type="range" id="scale" value="10"><br>
Function: <input id="function" value="Math.log(x)"><br>
<button id="draw">Draw</button>
<button id="line">f(x)=x</button>
<button id="quadraticFunction">f(x)=x^2</button>
<button id="exponentialFunction">f(x)=e^x</button>
<button id="logarithmFunction">f(x)=ln(x)</button>
<button id="sinFunction">f(x)=sin(x)</button>
<button id="cosFunction">f(x)=cos(x)</button>
<button id="tanFunction">f(x)=tan(x)</button>
</body>
</html>