回答編集履歴
1
少し修正してみました
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
少し修正してみました。こんな感じでしょうか？
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
@@ -8,19 +8,29 @@
|
|
|
8
8
|
|
|
9
9
|
<p>
|
|
10
10
|
|
|
11
|
+
左側の図形のサイズ：
|
|
12
|
+
|
|
11
|
-
縦：<input type="number"
|
|
13
|
+
縦：<input type="number" id="tate1" size="40" size="40" min="1" max="100" value="50">
|
|
14
|
+
|
|
15
|
+
横：<input type="number" id="yoko1" size="40" size="40" min="1" max="100" value="80">
|
|
12
16
|
|
|
13
17
|
</p>
|
|
14
18
|
|
|
15
19
|
<p>
|
|
16
20
|
|
|
21
|
+
右側の図形のサイズ：
|
|
22
|
+
|
|
23
|
+
縦：<input type="number" id="tate2" size="40" size="40" min="1" max="100" value="50">
|
|
24
|
+
|
|
17
|
-
横：<input type="number"
|
|
25
|
+
横：<input type="number" id="yoko2" size="40" size="40" min="1" max="100" value="80">
|
|
18
26
|
|
|
19
27
|
</p>
|
|
20
28
|
|
|
21
|
-
<
|
|
29
|
+
<p>
|
|
22
30
|
|
|
23
31
|
<input type="button" value="更新" onclick="koushin1()">
|
|
32
|
+
|
|
33
|
+
</p>
|
|
24
34
|
|
|
25
35
|
<canvas id="pattern1" width="1000" height="500"></canvas>
|
|
26
36
|
|
|
@@ -44,15 +54,15 @@
|
|
|
44
54
|
|
|
45
55
|
var ctx = canvas.getContext('2d');
|
|
46
56
|
|
|
47
|
-
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
57
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
48
58
|
|
|
49
|
-
var yoko1 = document.getElement
|
|
59
|
+
var yoko1 = document.getElementById('yoko1').value;
|
|
50
60
|
|
|
51
|
-
var tate1 = document.getElement
|
|
61
|
+
var tate1 = document.getElementById('tate1').value;
|
|
52
62
|
|
|
53
|
-
var yoko2 = document.getElement
|
|
63
|
+
var yoko2 = document.getElementById('yoko2').value;
|
|
54
64
|
|
|
55
|
-
var tate2 = document.getElement
|
|
65
|
+
var tate2 = document.getElementById('tate2').value;
|
|
56
66
|
|
|
57
67
|
|
|
58
68
|
|
|
@@ -62,8 +72,6 @@
|
|
|
62
72
|
|
|
63
73
|
}
|
|
64
74
|
|
|
65
|
-
|
|
66
|
-
|
|
67
75
|
}
|
|
68
76
|
|
|
69
77
|
|
|
@@ -72,11 +80,11 @@
|
|
|
72
80
|
|
|
73
81
|
draw();
|
|
74
82
|
|
|
83
|
+
|
|
84
|
+
|
|
75
85
|
}
|
|
76
86
|
|
|
77
87
|
</script>
|
|
78
|
-
|
|
79
|
-
</body>
|
|
80
88
|
|
|
81
89
|
```
|
|
82
90
|
|
|
@@ -84,6 +92,6 @@
|
|
|
84
92
|
|
|
85
93
|
＜実行結果＞
|
|
86
94
|
|
|
87
|
-
[https://jsfiddle.net/cx20/
|
|
95
|
+
[https://jsfiddle.net/cx20/4p5q7uvg/](https://jsfiddle.net/cx20/4p5q7uvg/)
|
|
88
96
|
|
|
89
|
-
|