質問編集履歴

3

少しいじりました。

2021/12/22 03:48

投稿

josikikusokurae
josikikusokurae

スコア27

test CHANGED
File without changes
test CHANGED
@@ -240,6 +240,90 @@
240
240
 
241
241
  ```
242
242
 
243
-
243
+ ```
244
+
245
+ <canvas id="rectangle" width="700" height="550"></canvas>
246
+
247
+ <script type="text/javascript">
248
+
249
+ //読み込み時に実行する
250
+
251
+ onload = function() {
252
+
253
+ /* 四角を描く */
254
+
255
+ var rect_canvas = document.getElementById("rectangle");
256
+
257
+ var rect_ctx = rect_canvas.getContext("2d");
258
+
259
+ var rect_up = rect_canvas.getContext("2d");
260
+
261
+ var rect_down = rect_canvas.getContext("2d");
262
+
263
+ rect_ctx.beginPath();
264
+
265
+ rect_up.beginPath();
266
+
267
+ rect_down.beginPath();
268
+
269
+ // 四角を描く(A4サイズ)
270
+
271
+ rect_ctx.strokeRect(55, 20, 584.5, 413.5);
272
+
273
+ rect_up.fillRect(95, 163, 500, 15);
274
+
275
+ rect_down.fillRect(95, 288, 500, 15);
276
+
277
+
278
+
279
+ window.addEventListener('DOMContentLoaded', ()=>{
280
+
281
+ document.querySelector('#btn').addEventListener('click',()=>{
282
+
283
+ const ctx = document.getElementById('rectangle').getContext('2d');
284
+
285
+ ctx.font = "48px serif";
286
+
287
+ ctx.fillStyle = document.querySelector('#color').value;
288
+
289
+ ctx.fillText(document.querySelector('.text').value, 10, 50);
290
+
291
+ });
292
+
293
+ });
294
+
295
+ }
296
+
297
+ </script>
298
+
299
+ <div class="stuff">
300
+
301
+ <div class="textBox">
302
+
303
+ <input class="text" id = "a" type="text" onkeyup="this.setAttribute('value', this.value);" value=""/>
304
+
305
+ <input class="text" id = "b" type="text" onkeyup="this.setAttribute('value', this.value);" value=""/>
306
+
307
+ <input class="text" id = "c" type="text" onkeyup="this.setAttribute('value', this.value);" value=""/>
308
+
309
+ </div>
310
+
311
+ </div>
312
+
313
+ <select id="color">
314
+
315
+ <option value="black">黒</optioin>
316
+
317
+ <option value="red">赤</optioin>
318
+
319
+ <option value="blue">青</optioin>
320
+
321
+ <option value="yellow">黄色</optioin>
322
+
323
+ </select>
324
+
325
+ <input type="button" id="btn" value="テキスト設定"><br>
326
+
327
+ ```
244
328
 
245
329
  よろしくお願いします。

2

<font color = "ここを選択できる"></font> このような形になるのではないかと予測しました。

2021/12/22 03:48

投稿

josikikusokurae
josikikusokurae

スコア27

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,9 @@
8
8
 
9
9
  ### 発生している問題・エラーメッセージ
10
10
 
11
- powerpointなどのように、入力したテキストの色を変えられる機能を搭載したいです。しかし、調べても解決できませんでした。
11
+ powerpointなどのように、入力したテキストの色を変えられる機能を搭載したいです。
12
+
13
+ <font color = "ここを選択できる"></font> このような形になるのではないかと予測しました。
12
14
 
13
15
  ![![イメージ説明](4295d362ece25c25aeac5861125df8ba.png)
14
16
 

1

<font color = "ここを選択できる"></font> このような形になるのではないかと予測しました。

2021/12/22 00:06

投稿

josikikusokurae
josikikusokurae

スコア27

test CHANGED
File without changes
test CHANGED
@@ -8,8 +8,6 @@
8
8
 
9
9
  ### 発生している問題・エラーメッセージ
10
10
 
11
-
12
-
13
11
  powerpointなどのように、入力したテキストの色を変えられる機能を搭載したいです。しかし、調べても解決できませんでした。
14
12
 
15
13
  ![![イメージ説明](4295d362ece25c25aeac5861125df8ba.png)