-
Notifications
You must be signed in to change notification settings - Fork 1
/
rotation.html
144 lines (131 loc) · 5.03 KB
/
rotation.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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="image/icontestHtml.png">
<title>図形生成アプリ | 回転</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap" rel="stylesheet">
</head>
<body id="rotation">
<header>
<div class="logo">
<a href="index.html"><img src="image/zukeiapplogo.png" alt=
"図形生成アプリ" width="200">
</a>
</div>
<nav>
<!-- 画像をクリックするとツイッターに飛ぶリンク -->
<!-- <div class="link">
<a id="twitterLink" href="https://x.com/0526ngs" target="_blank">
<img src="image/iconTwitterhrmcngsHtml.png" alt="Twitter Link Image" width="100">
</a>
<a id="twitterLink" href="https://Instagram.com/0526ngs" target="_blank">
<img src="image/iconInstagramhrmcngsHtml.png" alt="Instagram Link Image" width="100">
</a>
<a id="twitterLink" href="https://github.com/hrmcngs" target="_blank">
<img src="image/iconGithubhrmcngsHtml.png" alt="Github Link Image" width="100">
</a>
<a id="twitterLink" href="https://x.com/RenkonUmauma65" target="_blank">
<img src="image/iconTwitterrenkonHtml.png" alt="Twitter Link Image" width="100">
</a>
<a id="twitterLink" href="https://github.com/Renkon65" target="_blank">
<img src="image/iconGithubrenkonHtml.png" alt="github Link Image" width="100">
</a>
</div> -->
<div class="global-nav">
<ul>
<li><a class="button" href="rotation.html">回転</a></li>
<li><a class="button" href="pythagorean-theorem.html">三平方の定理</a></li>
<li><a class="button" href="canvas-arc.html">円弧</a></li>
<li><a class="button" href="3dgraphics.html">3D図形</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="rotation_main">
<br><br>
<h1></h1>
<p></p>
<input type="range" min="0" max="359" id="degrees">
<table>
<tbody>
<tr>
<th>degrees</th>
<td id="degrees-value"></td>
</tr>
<tr>
<th>radian</th>
<td id="radian-value"></td>
</tr>
<tr>
<th>x</th>
<td id="x-value"></td>
</tr>
<tr>
<th>y</th>
<td id="y-value"></td>
</tr>
</tbody>
</table>
<script>
const degrees = document.getElementById('degrees');
// canvasを作ってHTMLに突っ込む。
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);
// 円運動の中心座標。
// 今回はcanvasの真ん中を中心に移動する。
const centerX = 250;
const centerY = 250;
// 円を描画する中心からの距離。
const distanceFromCenter = 150;
// 表示する円のサイズ。
const circleSize = 30;
// 変化させていくパラメータ。
// angleRadを増加させていき、
// それに伴いxとyが変化していくようにする。
let x = centerX;
let y = centerY;
let angleRad = 0;
// メインループ
function loop(timestamp) {
// 描画内容を消去する。
context.clearRect(0, 0, canvas.width, canvas.height);
// angleRadを1度ずつ変化させていく。
// 1度はMath.PI/180ラジアン。
angleRad = degrees.value * Math.PI / 180;
// ここで座標を変化させていく。
x = distanceFromCenter * Math.cos(angleRad) + centerX;
y = distanceFromCenter * Math.sin(angleRad) + centerY;
// 求めた座標に円を描画する。
const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
context.beginPath();
context.arc(x, y, circleSize, 0, Math.PI * 2);
context.fillStyle = isDark ? 'rgb(41, 73, 216)' : 'rgb(41, 73, 216)';
context.fill();
document.getElementById('x-value').innerText = x;
document.getElementById('y-value').innerText = y;
document.getElementById('radian-value').innerText = angleRad;
document.getElementById('degrees-value').innerText = degrees.value;
window.requestAnimationFrame(loop);
}
window.requestAnimationFrame(loop);
</script>
</div>
<div class="omake">
<h2>おまけ</h2>
<ul>
<li><a class="button" href="miencraft-blasting-smoking-campfire-cooking-recipe.html">blasting-smoking-campfire-cooking</a></li>
<li><a class="button" href="miencraft-crafting-recipe.html">minecraft-crafting-recipe</a></li>
<li><a class="button" href="miencraft-smelting-recipe.html">minecraft-smelting-recipe</a></li>
</ul>
</div>
<footer><small>2024年9月4日現在最新版</small></footer>
</body>
</html>