-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathbearings.html
84 lines (76 loc) · 3.42 KB
/
bearings.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
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#candle{margin-left:auto;margin-right:auto;text-align:center;}
h1{text-align:center;color:red;text-shadow:2px 2px 8px rgb(19, 18, 18);}
h2{text-align:center;color:olive;text-shadow:2px 2px 4px rgb(24, 23, 23);}
</style>
</head>
<body>
<h1>Bearings</h1>
<h2>Click the mouse along the <strong>slider</strong> and watch the updating <strong>below</strong> for the <strong>bearing.</strong></h2>
<canvas id="Canvas_Six" width="500" height="400 class="img-responsive">
</canvas>
<p> </p>
0<sup>0</sup><input type="range" name="points" min="-90" max="270" id="ran" value="-60" step="30">360<sup>0</sup>
<p> </p>
<p style="width:600px; text-align:center;color:red;font-size:large;font-weight:bold;" id="p" />
<p> </p>
<script type="text/javascript">
window.setInterval('bear()', 1000)
function bear() {
var a = (Math.PI / 180) * eval(document.getElementById('ran').value);
var z;
var x = 250 + 150 * Math.cos(a);
var y = 200 + 150 * Math.sin(a);
var canvas = document.getElementById('Canvas_Six');
var context_six = canvas.getContext('2d');
context_six.clearRect(0, 0, 500, 400);
// Vertical line
context_six.beginPath();
context_six.moveTo(250, 200);
context_six.lineTo(250, 4);
context_six.lineWidth = 5;
context_six.strokeStyle = 'blue';
context_six.stroke()
context_six.closePath();
// Moving line
context_six.beginPath();
context_six.moveTo(250, 200);
context_six.lineTo(x, y);
context_six.lineWidth = 5;
context_six.strokeStyle = 'purple';
context_six.stroke()
context_six.closePath();
// Arc
context_six.beginPath();
context_six.arc(250, 200, 150, 1.5 * Math.PI, a);
context_six.strokeStyle = 'red';
context_six.stroke()
// Text
context_six.font = 'bold 20pt Calibri';
context_six.fillStyle = 'red';
context_six.fillText('N', 220, 20);
context_six.font = 'bold 20pt Calibri';
context_six.fillStyle = 'blue';
context_six.fillText('A', 246, 220);
context_six.font = 'bold 20pt Calibri';
context_six.fillStyle = 'blue';
context_six.fillText('B', x, y);
context_six.font = 'bold 30pt Calibri';
context_six.fillStyle = 'blue';
context_six.fillText('^', 240, 25);
if (a + 90 <= 90) {
z = 'Bearings of B from A = 0' + (eval(document.getElementById('ran').value) + 90);
document.getElementById('p').innerHTML = z + '<sup>0</sup>';
}
else {
z = 'Bearings of B from A = ' + (eval(document.getElementById('ran').value) + 90);
document.getElementById('p').innerHTML = z + '<sup>0</sup>';
}
}
</script>
</body>
</html>