回答編集履歴
4
修正
test
CHANGED
|
@@ -84,13 +84,13 @@
|
|
|
84
84
|
|
|
85
85
|
// わかりやすさのため矩形を塗りつぶす(やらなくてもいい)
|
|
86
86
|
|
|
87
|
-
ctx.fillStyle = '
|
|
87
|
+
ctx.fillStyle = 'red';
|
|
88
88
|
|
|
89
89
|
ctx.fill(t.path);
|
|
90
90
|
|
|
91
91
|
// テキストを描画する
|
|
92
92
|
|
|
93
|
-
ctx.fillStyle = '
|
|
93
|
+
ctx.fillStyle = 'black';
|
|
94
94
|
|
|
95
95
|
ctx.fillText(t.text, t.x, t.y);
|
|
96
96
|
|
3
追記
test
CHANGED
|
@@ -9,6 +9,10 @@
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
canvasは結局の所ペイントみたいな上書き仕様なので、canvas内に新たなテキストなどを表示・非表示をしたい場合、「上書き→すべて消す→下のものを再描画」という手順を踏むか、canvasの上に別のcanvasを重ねておき、吹き出しなどはそちらに描画するようにする、などの方法を取る必要があります。
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
また今回はわかりやすさ重視でなるべく単純な感じに書いてますが、理解ができるならクラス(HTMLではなくjsの)を用いた設計をするといい感じになると思います。
|
|
12
16
|
|
|
13
17
|
|
|
14
18
|
|
2
修正
test
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
``html
|
|
15
|
+
```html
|
|
16
16
|
|
|
17
17
|
<canvas id="canvas" width=300 height=300></canvas>
|
|
18
18
|
|
1
html追加
test
CHANGED
|
@@ -9,6 +9,16 @@
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
canvasは結局の所ペイントみたいな上書き仕様なので、canvas内に新たなテキストなどを表示・非表示をしたい場合、「上書き→すべて消す→下のものを再描画」という手順を踏むか、canvasの上に別のcanvasを重ねておき、吹き出しなどはそちらに描画するようにする、などの方法を取る必要があります。
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
``html
|
|
16
|
+
|
|
17
|
+
<canvas id="canvas" width=300 height=300></canvas>
|
|
18
|
+
|
|
19
|
+
<script src="script.js"></script>
|
|
20
|
+
|
|
21
|
+
```
|
|
12
22
|
|
|
13
23
|
|
|
14
24
|
|