質問編集履歴
3
少しいじりました。
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> このような形になるのではないかと予測しました。
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
|
|
|
14
16
|
|
1
<font color = "ここを選択できる"></font> このような形になるのではないかと予測しました。
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
|
|