-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcanvas-arc.html
131 lines (123 loc) · 5.5 KB
/
canvas-arc.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
<!DOCTYPE HTML>
<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="canvas-arc">
<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="canvas-arc_main">
<p>バーを操作すれば表示されます</p>
<input type="range" min="-2" max="2" step="0.01" id="start-angle">
<input type="range" min="-2" max="2" step="0.01" id="end-angle">
<br><br>
<table>
<tbody>
<tr>
<th>孤の始まる角度</th>
<td><input type="number" step="0.01" min="-2" max="2" id="start-angle-value"/></td>
</tr>
<tr>
<th>孤の終わる角度</th>
<td><input type="number" step="0.01" min="-2" max="2" id="end-angle-value"></td>
</tr>
</tbody>
</table>
<canvas id="myCanvas" width="578" height="250"></canvas>
<script>
const startAngleInput = document.getElementById('start-angle');
const endAngleInput = document.getElementById('end-angle');
const startAngleValue = document.getElementById('start-angle-value');
const endAngleValue = document.getElementById('end-angle-value');
const mql = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
function update() {
//windowに合わせて色を変えるための定義
const isDark = mql.matches;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 90;
var startAngle = startAngleInput.value * Math.PI;
var endAngle = endAngleInput.value * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = isDark ? 'rgb(41, 73, 216)' : 'rgb(41, 73, 216)';
context.stroke();
startAngleValue.value = startAngleInput.value;
endAngleValue.value = endAngleInput.value;
}
function updateStartAngleValue(e) {
startAngleInput.value = e.target.value;
update();
}
function updateEndAngleValue(e) {
endAngleInput.value = e.target.value;
update();
}
update();
startAngleInput.addEventListener('input', update);
startAngleInput.addEventListener('change', update);
startAngleValue.addEventListener('change', updateStartAngleValue)
endAngleInput.addEventListener('input', update);
endAngleInput.addEventListener('change', update);
endAngleValue.addEventListener('change', updateEndAngleValue)
mql.addEventListener('change', update);
</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>