質問編集履歴
1
追記してみました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -81,4 +81,50 @@
|
|
|
81
81
|
|
|
82
82
|
});
|
|
83
83
|
|
|
84
|
-
```
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
（追記）2017-09-04-0:08
|
|
87
|
+
分かり難い質問になってしまい、すみません。追記します。
|
|
88
|
+
|
|
89
|
+
以下の部分で、
|
|
90
|
+
angle0.5度でいったん表示、angle1度でまた表示、1.5度で表示、2度で表示・・・
|
|
91
|
+
と繰り返せばラインが伸びていく様子が描画されるかな、と思っています。
|
|
92
|
+
|
|
93
|
+
```javascript
|
|
94
|
+
while (angle <= 360) {
|
|
95
|
+
const x = 150 * Math.sin(a * angle * Math.PI / 180);
|
|
96
|
+
const y = 150 * Math.sin(b * angle * Math.PI / 180);
|
|
97
|
+
if (angle === 0) {
|
|
98
|
+
graph.moveTo(xHalf + x, yHalf - y);
|
|
99
|
+
} else {
|
|
100
|
+
graph.lineTo(xHalf + x, yHalf - y);
|
|
101
|
+
}
|
|
102
|
+
graph.strokeStyle = "blue";
|
|
103
|
+
graph.stroke();
|
|
104
|
+
angle += 0.5;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
```
|
|
108
|
+
イメージとしては下から３行目を
|
|
109
|
+
setTimeout(graph.stroke(), 300); とか setInterval(graph.stroke(), 300);
|
|
110
|
+
のようにする感じです。
|
|
111
|
+
（あくまでイメージです。これでは動きません。）
|
|
112
|
+
|
|
113
|
+
それをangle360度まで繰り返せば、
|
|
114
|
+
じわじわ伸びるラインが表示されるのではないかと。
|
|
115
|
+
|
|
116
|
+
もしくは、
|
|
117
|
+
while (angle <= 360) {
|
|
118
|
+
の360の部分を100にしたり180にしたりすると途中経過が表示されることは分かっているので、ここが引数で渡される関数を作る方法にもチャレンジしましたがダメでした。
|
|
119
|
+
|
|
120
|
+
いずれにせよ処理を遅延させるメソッドの理解が乏しいようで、
|
|
121
|
+
ネット検索で出てくる例文は理解出来たつもりでも、それを真似して組み込むと失敗します。
|
|
122
|
+
変更前同様、グラフが一瞬で表示されてしまうか、まったく表示されなくなってしまうか。
|
|
123
|
+
|
|
124
|
+
この作業中、ESLintには
|
|
125
|
+
Don't make functions within a loop. (no-loop-func)
|
|
126
|
+
（ループ内で関数を作成しないでください）
|
|
127
|
+
と、よく怒られているところです。
|
|
128
|
+
|
|
129
|
+
グラフの『完成図形』が目的ではなく、
|
|
130
|
+
グラフのドットが伸びていく『過程』を見られるようにしたいです。
|