回答編集履歴
2
ベストアンサー後、ご指摘のあった箇所を修正しました
test
CHANGED
|
@@ -3,15 +3,14 @@
|
|
|
3
3
|
違ってたらすみません。
|
|
4
4
|
|
|
5
5
|
実行結果
|
|
6
|
-
[初期状態](https://i.gyazo.com/a
|
|
6
|
+
[初期状態](https://i.gyazo.com/fac10ebf9e7f6dd0ff96b04dc54a5a7b.png)
|
|
7
|
-
[色変更後](https://i.gyazo.com/
|
|
7
|
+
[色変更後](https://i.gyazo.com/a9cb58a939fc8dbb24c3872a9b59e5e5.png)
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
10
|
<!DOCTYPE html>
|
|
11
11
|
<html lang="jp">
|
|
12
12
|
|
|
13
13
|
<head>
|
|
14
|
-
<input type="color" value="#515694" id="color">
|
|
15
14
|
<meta charset="UTF-8">
|
|
16
15
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
17
16
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
@@ -20,32 +19,50 @@
|
|
|
20
19
|
<canvas id="can"> </canvas>
|
|
21
20
|
|
|
22
21
|
<body>
|
|
22
|
+
|
|
23
|
+
<label>色設定： <input type="color" value="#515694" id="color"></label>
|
|
23
24
|
<script>
|
|
25
|
+
|
|
24
26
|
//キャンバス
|
|
25
27
|
const can = document.getElementById('can');
|
|
26
28
|
const con = can.getContext('2d');
|
|
29
|
+
|
|
27
30
|
//初期色
|
|
28
31
|
let inputColor = '#515694';
|
|
29
32
|
function main() {
|
|
30
|
-
|
|
33
|
+
|
|
31
34
|
//カラーピッカーの色を反映
|
|
32
35
|
color.addEventListener('change', function () {
|
|
33
36
|
inputColor = document.getElementById('color').value
|
|
37
|
+
main();
|
|
34
38
|
});
|
|
39
|
+
|
|
40
|
+
//図形クリア
|
|
41
|
+
con.clearRect(0, 0, 500, 500);
|
|
42
|
+
|
|
35
43
|
//図形描画
|
|
36
44
|
con.fillStyle = inputColor;
|
|
37
45
|
con.fillRect(0, 0, 300, 300);
|
|
46
|
+
|
|
47
|
+
//カラーコード描画
|
|
38
48
|
con.font = "20px'MS ゴシック'";
|
|
39
49
|
con.lineWidth = 4;
|
|
40
50
|
con.fillStyle = "black";
|
|
41
|
-
//カラーコード描画
|
|
42
51
|
con.fillText("inputColor", 20, 40);
|
|
43
52
|
con.fillText(inputColor, 20, 60);
|
|
44
53
|
}
|
|
45
|
-
//ループ
|
|
54
|
+
// //ループ
|
|
46
|
-
setInterval(main, 1000 / 60);
|
|
55
|
+
// setInterval(main, 1000 / 60);
|
|
56
|
+
main();
|
|
47
57
|
</script>
|
|
48
58
|
</body>
|
|
49
59
|
|
|
50
60
|
</html>
|
|
51
61
|
```
|
|
62
|
+
|
|
63
|
+
---
|
|
64
|
+
※ベストアンサー後、ご指摘のあった箇所を修正しました※
|
|
65
|
+
> setInterval() は不要です
|
|
66
|
+
> <head> の中に <input> を入れてはいけません
|
|
67
|
+
> イベントリスナの中から main() を呼べばよいです
|
|
68
|
+
|
1
初期状態から色変更後の画像を追加
test
CHANGED
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
ご質問の内容からやりたいことを推測してみたのですがこういうことでしょうか？
|
|
3
3
|
違ってたらすみません。
|
|
4
4
|
|
|
5
|
+
実行結果
|
|
5
|
-
[
|
|
6
|
+
[初期状態](https://i.gyazo.com/a98c1a248eba2abe01d6d242c34997fc.png)
|
|
7
|
+
[色変更後](https://i.gyazo.com/4fcb9b5a76a0335d7d5e48082823fd0f.png)
|
|
6
8
|
|
|
7
9
|
```html
|
|
8
10
|
<!DOCTYPE html>
|