回答編集履歴

2

tuiki

2021/12/22 03:33

投稿

yambejp
yambejp

スコア116726

test CHANGED
@@ -51,3 +51,49 @@
51
51
  <canvas id="rectangle" width="700" height="550"></canvas>
52
52
 
53
53
  ```
54
+
55
+
56
+
57
+ # 色も指定
58
+
59
+ ```javascript
60
+
61
+ <script>
62
+
63
+ window.addEventListener('DOMContentLoaded', ()=>{
64
+
65
+ document.querySelector('#btn').addEventListener('click',()=>{
66
+
67
+ const ctx = document.getElementById('rectangle').getContext('2d');
68
+
69
+ ctx.font = "48px serif";
70
+
71
+ ctx.fillStyle = document.querySelector('#color').value;
72
+
73
+ ctx.fillText(document.querySelector('#txt').value, 10, 50);
74
+
75
+ });
76
+
77
+ });
78
+
79
+ </script>
80
+
81
+ <input type="text" id="txt" value="Hello world">
82
+
83
+ <select id="color">
84
+
85
+ <option value="black">黒</optioin>
86
+
87
+ <option value="red">赤</optioin>
88
+
89
+ <option value="blue">青</optioin>
90
+
91
+ <option value="yellow">黄色</optioin>
92
+
93
+ </select>
94
+
95
+ <input type="button" id="btn" value="テキスト設定"><br>
96
+
97
+ <canvas id="rectangle" width="700" height="550"></canvas>
98
+
99
+ ```

1

追記

2021/12/22 03:33

投稿

yambejp
yambejp

スコア116726

test CHANGED
@@ -17,3 +17,37 @@
17
17
  </script>
18
18
 
19
19
  ```
20
+
21
+
22
+
23
+ # あとからテキスト追加
24
+
25
+ ```javascript
26
+
27
+ <script>
28
+
29
+ window.addEventListener('DOMContentLoaded', ()=>{
30
+
31
+ document.querySelector('#btn').addEventListener('click',()=>{
32
+
33
+ const ctx = document.getElementById('rectangle').getContext('2d');
34
+
35
+ ctx.font = "48px serif";
36
+
37
+ ctx.fillStyle = 'red';
38
+
39
+ ctx.fillText(document.querySelector('#txt').value, 10, 50);
40
+
41
+ });
42
+
43
+ });
44
+
45
+ </script>
46
+
47
+ <input type="text" id="txt" value="Hello world">
48
+
49
+ <input type="button" id="btn" value="テキスト設定"><br>
50
+
51
+ <canvas id="rectangle" width="700" height="550"></canvas>
52
+
53
+ ```