blog-javascript-canvasChart/index.html at master · ChatLune/blog-javascript-canvasChart · GitHub

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<script src="js/main.js"></script>
</head>
<body>
    <div>
    	<canvas id="chart" height="400" width="500"></canvas>
    </div>
    <div>
    	<label>頂点の数:</label>
    	<input id="vertex" type="number" value="5" min="3">
	</div>
	<div>
    	<label>大きさ:</label>
    	<input id="size" type="number" value="150" min="100">
	</div>
	<div>
    	<label>傾き:</label>
    	<input id="tilt" type="number" value="180" min="0">
	</div>
	<div>
    	<label>メモリの数:</label>
    	<input id="scale" type="number" value="5" min="1" max="10">
	</div>
	<div>
    	<label>線の色:</label>
    	<input id="line_color" type="text" value="#a9a9a9">
	</div>
	<div>
    	<label>外枠の線の太さ:</label>
    	<input id="line_width_out" type="number" value="4" min="1" max="10">
	</div>
	<div>
    	<label>内枠の線の太さ:</label>
    	<input id="line_width" type="number" value="2" min="1" max="10">
	</div>
	<div>
    	<label>中心線の太さ</label>
    	<input id="line_width_center" type="number" value="1" min="1" max="10">
	</div>
</body>
</html>