質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

548閲覧

【canvas要素】2Dグラフをゆっくり表示したい

himejiy3

総合スコア77

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2017/09/03 07:45

編集2017/09/03 15:11

下記はリサジュー曲線を描くプログラムで、一応、表示してくれるものを書けたのですが

自分の理想としては、angle(角度)360でパッと表示されるのではなく、
0.5度設定刻みでダラ~というかビロ~ンというか、
ラインが描画されていく様子を楽しみたいのです。

そこでsetTimeoutかなと思い、いろいろ試したのですが
どうしても上手く動いてくれませんでした。

どのように改造すれば良いでしょうか。
ご教授よろしくお願いいたします。

(余談ですが
やっぱり「a=2,b=5」または「a=3,b=8」が面白いと思います。)

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Lissajous curve</title> 6</head> 7<body> 8 値a<input id="data1" type="number"> 9 値b<input id="data2" type="number"> 10 <input id="drawBtn" type="button" value="描画する"><br> 11 <canvas id="xyPlane" width="640" height="580"></canvas> 12 <script src="js/main1.js"></script> 13</body> 14</html> 15

javascript

1document.addEventListener("DOMContentLoaded", () => { 2 "use strict"; 3 4 let graph; 5 const xWidth = 640; 6 const xHalf = xWidth / 2; 7 const yHeight = 580; 8 const yHalf = yHeight / 2; 9 10 function axis2d() { 11 graph.strokeStyle = "black"; 12 graph.beginPath(); 13 graph.moveTo(0, yHalf); 14 graph.lineTo(xWidth, yHalf); 15 graph.moveTo(xHalf, 0); 16 graph.lineTo(xHalf, yHeight); 17 graph.stroke(); 18 } 19 function draw() { 20 let angle = 0; 21 const a = document.getElementById("data1").value; 22 const b = document.getElementById("data2").value; 23 graph.beginPath(); 24 while (angle <= 360) { 25 const x = 150 * Math.sin(a * angle * Math.PI / 180); 26 const y = 150 * Math.sin(b * angle * Math.PI / 180); 27 if (angle === 0) { 28 graph.moveTo(xHalf + x, yHalf - y); 29 } else { 30 graph.lineTo(xHalf + x, yHalf - y); 31 } 32 graph.strokeStyle = "blue"; 33 graph.stroke(); 34 angle += 0.5; 35 } 36 } 37 38 const xyPlane = document.getElementById("xyPlane"); 39 if (xyPlane.getContext) { 40 graph = xyPlane.getContext("2d"); 41 axis2d(); 42 } 43 44 const drawBtn = document.getElementById("drawBtn"); 45 drawBtn.addEventListener("click", draw); 46 47}); 48

(追記)2017-09-04-0:08
分かり難い質問になってしまい、すみません。追記します。

以下の部分で、
angle0.5度でいったん表示、angle1度でまた表示、1.5度で表示、2度で表示・・・
と繰り返せばラインが伸びていく様子が描画されるかな、と思っています。

javascript

1while (angle <= 360) { 2 const x = 150 * Math.sin(a * angle * Math.PI / 180); 3 const y = 150 * Math.sin(b * angle * Math.PI / 180); 4 if (angle === 0) { 5 graph.moveTo(xHalf + x, yHalf - y); 6 } else { 7 graph.lineTo(xHalf + x, yHalf - y); 8 } 9 graph.strokeStyle = "blue"; 10 graph.stroke(); 11 angle += 0.5; 12} 13

イメージとしては下から3行目を
setTimeout(graph.stroke(), 300); とか setInterval(graph.stroke(), 300);
のようにする感じです。
(あくまでイメージです。これでは動きません。)

それをangle360度まで繰り返せば、
じわじわ伸びるラインが表示されるのではないかと。

もしくは、
while (angle <= 360) {
の360の部分を100にしたり180にしたりすると途中経過が表示されることは分かっているので、ここが引数で渡される関数を作る方法にもチャレンジしましたがダメでした。

いずれにせよ処理を遅延させるメソッドの理解が乏しいようで、
ネット検索で出てくる例文は理解出来たつもりでも、それを真似して組み込むと失敗します。
変更前同様、グラフが一瞬で表示されてしまうか、まったく表示されなくなってしまうか。

この作業中、ESLintには
Don't make functions within a loop. (no-loop-func)
(ループ内で関数を作成しないでください)
と、よく怒られているところです。

グラフの『完成図形』が目的ではなく、
グラフのドットが伸びていく『過程』を見られるようにしたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/09/03 13:59

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
guest

回答1

0

ベストアンサー

とりあえず while を関数化してしまえば setTimeout しやすいと思いますよ。

JavaScript

1draw_angle( 0 ); 2function draw_angle( angle ) { 3 const x = 150 * Math.sin(a * angle * Math.PI / 180); 4 const y = 150 * Math.sin(b * angle * Math.PI / 180); 5 if (angle === 0) { 6 graph.moveTo(xHalf + x, yHalf - y); 7 } else { 8 graph.lineTo(xHalf + x, yHalf - y); 9 } 10 graph.strokeStyle = "blue"; 11 graph.stroke(); 12 angle += 0.5; 13 if (angle <= 360) { 14 setTimeout( function() { draw_angle( angle ); }, 300 ); 15 } 16}

【Canvasアニメーションの要点 - Qiita】
http://qiita.com/nekoneko-wanwan/items/33afa5d20264c83b2bd1

投稿2017/09/03 17:06

kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

himejiy3

2017/09/04 02:42

なるほど・・・これで動くものだったのですね。 自分はwhileの部分を関数化しようとしたとき、 drawの外に出しておこうとして、動かなくて諦めました。 今考えると、変数の引き渡しが出来ていなかっただけのような気がします。 あまりにも失敗が続き、いろいろと勘違いも重なっていたようです。 紹介リンクも読んで、勉強しておきます。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問