###前提・実現したいこと
Canvasを使った波のアニメーションを実装したいと考えています。
実装することはできたのですが、これを同じページに複数設置する場合、
どう修正したら良いのかご教示いただきたいです。
(類似の質問は見つけたのですが、私には難しく…)
具体的には下記の項目を実現したいと思っています。
- 同一アニメショーンのCanvasを同一ページに複数設置したい。
- 色をCanvas毎に変更したい。
###該当のソースコード
下記のサイトを参考にしています。
http://sterfield.co.jp/designer/canvasで波のアニメーションを描画する/
→デモ
http://sterfield.co.jp/demo/ninomiya/104/index2.html
html
1<canvas id="sineCanvas" width="800" height="300"></canvas>
javascript
1(function () { 2 3var unit = 100, 4 canvas, context, canvas2, context2, 5 height, width, xAxis, yAxis, 6 draw; 7 8/** 9 * Init function. 10 * 11 * Initialize variables and begin the animation. 12 */ 13function init() { 14 15 canvas = document.getElementById("sineCanvas"); 16 17 canvas.width = document.documentElement.clientWidth; //Canvasのwidthをウィンドウの幅に合わせる 18 canvas.height = 300; 19 20 context = canvas.getContext("2d"); 21 22 height = canvas.height; 23 width = canvas.width; 24 25 xAxis = Math.floor(height/2); 26 yAxis = 0; 27 28 draw(); 29} 30 31/** 32 * Draw animation function. 33 * 34 * This function draws one frame of the animation, waits 20ms, and then calls 35 * itself again. 36 */ 37function draw() { 38 39 // キャンバスの描画をクリア 40 context.clearRect(0, 0, width, height); 41 42 //波を描画 43 drawWave('#10c2cd', 0.3, 3, 0); 44 drawWave('#43c0e4', 0.4, 2, 250); 45 drawWave('#1d82b6', 0.2, 1.6, 100); 46 47 // Update the time and draw again 48 draw.seconds = draw.seconds + .014; 49 draw.t = draw.seconds*Math.PI; 50 setTimeout(draw, 35); 51}; 52draw.seconds = 0; 53draw.t = 0; 54 55/** 56* 波を描画 57* drawWave(色, 不透明度, 波の幅のzoom, 波の開始位置の遅れ) 58*/ 59function drawWave(color, alpha, zoom, delay) { 60 context.fillStyle = color; 61 context.globalAlpha = alpha; 62 63 context.beginPath(); //パスの開始 64 drawSine(draw.t / 0.5, zoom, delay); 65 context.lineTo(width + 10, height); //パスをCanvasの右下へ 66 context.lineTo(0, height); //パスをCanvasの左下へ 67 context.closePath() //パスを閉じる 68 context.fill(); //塗りつぶす 69} 70 71/** 72 * Function to draw sine 73 * 74 * The sine curve is drawn in 10px segments starting at the origin. 75 * drawSine(時間, 波の幅のzoom, 波の開始位置の遅れ) 76 */ 77function drawSine(t, zoom, delay) { 78 79 // Set the initial x and y, starting at 0,0 and translating to the origin on 80 // the canvas. 81 var x = t; //時間を横の位置とする 82 var y = Math.sin(x)/zoom; 83 context.moveTo(yAxis, unit*y+xAxis); //スタート位置にパスを置く 84 85 // Loop to draw segments (横幅の分、波を描画) 86 for (i = yAxis; i <= width + 10; i += 10) { 87 x = t+(-yAxis+i)/unit/zoom; 88 y = Math.sin(x - delay)/3; 89 context.lineTo(i, unit*y+xAxis); 90 } 91} 92 93init(); 94 95})();
###試したこと
値を変更・削除したり、類似のものを流用してみたりしましたが、
どうも関数に弱く、丸一日作業が止まってしまいました。
丸投げに近い形で大変心苦しいのですが、
どうぞご教示のほどよろしくお願い致します。
同ページに複数、というのはcanvasがたくさん並んでいる状態ですか?それとも1つのcanvasの中に沢山の波がある状態ですか?
レスありがとうございます!!「canvasがたくさん並んでいる状態」となります。同じような質問で「https://teratail.com/questions/37404」があり、こちらにほぼ近い形が理想としているものです。ただ、こちらの方法では、3つ並べることには成功したものの、色を個別に指定という条件をクリアできず、また動きも理想とするものとは違ったため(動きは参考の波アニメーションと同一のものです)今回、質問させていただきました。
この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、「類似の質問」に関して質問本文に追記することをお勧めします。
回答3件
あなたの回答
tips
プレビュー