回答編集履歴
1
本文・コードを修正
answer
CHANGED
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
```javascript
|
|
4
4
|
function drawGhost() {
|
|
5
|
-
c.beginPath() //追加
|
|
6
5
|
c.lineWidth = 20;
|
|
7
6
|
c.strokeStyle = '#fff';
|
|
8
7
|
c.lineJoin = "round";
|
|
9
8
|
c.lineCap = 'round';
|
|
9
|
+
|
|
10
|
+
c.beginPath() //追加
|
|
10
11
|
c.moveTo(gX, gY);
|
|
11
12
|
c.quadraticCurveTo(gPX,gPY, gXE,gYE);
|
|
12
13
|
c.stroke();
|
|
@@ -23,7 +24,7 @@
|
|
|
23
24
|
}
|
|
24
25
|
```
|
|
25
26
|
|
|
26
|
-
`lineTo()`を呼び出すと、
|
|
27
|
+
`lineTo()`を呼び出すと、コンテキストに描画する線の情報を記録します。また、`stroke()`を呼び出すと、コンテキストに記録されている線の情報を元に、線を描画します。
|
|
27
28
|
|
|
28
29
|
`lineTo()`で記録された線の情報は、`stroke()`で線を描画しても破棄されません。なので、毎フレームごとに描画される線の情報が溜まっていくため、前のオバケが残ってしまっています。
|
|
29
30
|
（`clearRect()`自体は正常に動作しており、呼び出した直後は画面上から線は消去されています。しかし、次の`stroke()`が呼び出された時点で、これまでに描画した全ての線が再描画されてしまうため、前のオバケが残ってしまっているようになっています。）
|