Canvasで同じアニメーションを複数箇所に設置する方法

Question

Canvasを使って同じアニメーションを同一ページ内で複数箇所に設置したくて色々試しています。
設置したいのは波のような動きをするアニメーションです。
配列を使えばできるんじゃないかというところまで行き着きましたが、どうしてもエラーが出て解決できません。

下記のエントリを参考にして、複数設置できるように修正をしようとしているところです。
Canvasで波のアニメーションを描画する

▼現在のコード

<div class="canvas-container">
    <canvas class="sineCanvas" id="sineCanvas01" width="2000" height="200"></canvas>
</div>
<div class="canvas-container">
    <canvas class="sineCanvas" id="sineCanvas02" width="2000" height="200"></canvas>
</div>
<div class="canvas-container">
    <canvas class="sineCanvas" id="sineCanvas03" width="2000" height="200"></canvas>
</div>

(function () {

var unit = 20,
    canvas, canvas2, context2,
    xAxis,
    yAxis,
    draw,
    classCount = $(".sineCanvas").length;
var context = [];
var width = [];
var height = [];
/**
 * Init function.
 * 
 * Initialize variables and begin the animation.
 */
function init() {
    canvas = document.getElementsByClassName("sineCanvas");
    for (i = 0; i < classCount; i++) {
          context[i] = canvas[i].getContext('2d');
          canvas[i].width = $('.sineCanvas').width();
          canvas[i].height = $('.sineCanvas').height();
          width[i] = canvas[i].width;
          height[i] = canvas[i].height;
    }
    xAxis = Math.floor(height[0]/2);
    yAxis = 0;
    draw();
}

/**
 * Draw animation function.
 * 
 * This function draws one frame of the animation, waits 20ms, and then calls
 * itself again.
 */
function draw() {
  for (i = 0; i < classCount; i++) {
    // キャンバスの描画をクリア
    context[i].clearRect(0, 0, width[i], height[i]);

    //波を描画
    drawWave('#EFDBAD', 0.3, 3, 0);
    drawWave('#EFDBAD', 0.3, 3, 0);
    drawWave('#EFDBAD', 0.3, 3, 0);
    
    // Update the time and draw again
    draw.seconds = draw.seconds + .014;
    draw.t = draw.seconds*Math.PI;
    setTimeout(draw, 35);
  }
};
draw.seconds = 0;
draw.t = 0;

/**
* 波を描画
* drawWave(色, 不透明度, 波の幅のzoom, 波の開始位置の遅れ)
*/
function drawWave(color, alpha, zoom, delay) {
  for (i = 0; i < classCount; i++) {
    context[i].fillStyle = color;
    context[i].globalAlpha = alpha;

    context[i].beginPath(); //パスの開始
    drawSine(draw.t / 0.5, zoom, delay);
    context[i].lineTo(width[i] + 10, height[i]); //パスをCanvasの右下へ
    context[i].lineTo(0, height[i]); //パスをCanvasの左下へ
    context[i].closePath() //パスを閉じる
    context[i].fill(); //塗りつぶす
  }
}


/**
 * Function to draw sine
 * 
 * The sine curve is drawn in 10px segments starting at the origin. 
 * drawSine(時間, 波の幅のzoom, 波の開始位置の遅れ)
 */
function drawSine(t, zoom, delay) {
    var x = t;
    var y = Math.sin(x)/zoom;
    for (i = 0; i < classCount; i++) {
      context[i].moveTo(yAxis, unit*y+xAxis[i]);
      for (k = yAxis; k <= width[i] + 10; k += 10) {
          x = t+(-yAxis+k)/unit/zoom;
          y = Math.sin(x - delay)/3;
          context[i].lineTo(k, unit*y+xAxis[i]);
      }
    }
}

init();

})();

▼現時点で出ているエラーはこちらです（Firebugで確認）

TypeError: context[i] is undefined
	context[i].lineTo(width[i] + 10, height[i]); //パスをCanvasの右下へ

初心者なので処理を順を追ってalertなどで表示しながら間違っているところを午前中からずっと探しているのですが、もう完全にお手上げ状態です...。
どこが間違っているか、そもそもこの考え方で実現可能なのか教えていただけないでしょうか？？

もしくは配列を使わずにやる方法があればぜひ教えてください。
どうかよろしくお願いします。

Answer 1

実際コードをコピーして動かしてみました。

for文で使っているiという変数がグローバルスコープになっているため、
drawWaveから呼び出したdrawSineでiが上書きされ、訳の分からない挙動になっています。
forでカウンタを使うなら、必ずその時にローカルスコープで変数宣言しましょう。

//  ↓ この var が大事
for(var i=0;i<classCount;i++){
}

#追記
以下の箇所に問題があります。

xAxis[i]

xAxisは配列ではない、ただのfloat値ですが、配列アクセスをしようとしています。
私の環境では、[i]を消せばクリーム色の波が3つ表示されました。

Comments

[mx3]

回答ありがとうございます！varを入れて変数宣言してみましたが、ブラウザがフリーズしてしまう状態になってしまいました...。

もうひとつ、参考にしているコードがあるのですが、こちらはvarで変数宣言はしていません。これをコピペして使用すると（HTMLは変更なし）問題なく動きます。波の動きは期待しているものと異なりますが同一のcanvasアニメーションを複数設置という点では成功します。

ご指摘の内容は基本的なこととして抑えておくべきだと理解しましたが、この件についてはvarを使うことや、name属性がないことの他にも問題があるのではないかと思いますが、いかがでしょうか。もしまたお分かりになることがありましたら、ぜひ教えて頂けると嬉しいです。

```
function contentsWave(){
var canvas,
unit,
xAxis,
yAxis,
draw,
classCount = $(".sineCanvas").length;
var context = [];
var width = [];
var height = [];
function init() {
if (!window.HTMLCanvasElement) return;
canvas = document.getElementsByClassName("sineCanvas");
for (i = 0; i < classCount; i++) {
context[i] = canvas[i].getContext('2d');
canvas[i].width = $('.sineCanvas').width();
canvas[i].height = $('.sineCanvas').height();
width[i] = canvas[i].width;
height[i] = canvas[i].height;
}
xAxis = Math.floor(width[0]/75);
yAxis = 0;
unit = width[0]/60;
draw();
}
draw = function(){
for (i = 0; i < classCount; i++) {
context[i].clearRect(0, 0, width[i], height[i]);
if(i == 0){
context[i].strokeStyle = '#252525';
context[i].fillStyle = '#252525';
}else if(i == 1 || i == 2){
context[i].strokeStyle = '#34b9db';
context[i].fillStyle = '#34b9db';
}else if(i == 3 || i == 4 || i == 5 || i == 6 || i == 7){
context[i].strokeStyle = '#f5f5f5';
context[i].fillStyle = '#f5f5f5';
}
context[i].lineWidth = width[i]/30;
context[i].lineJoin = 'round';
context[i].beginPath();
}
drawSine(draw.t);
for (i = 0; i < classCount; i++) {
context[i].fill();
context[i].stroke();
context[i].closePath();
}
draw.seconds = draw.seconds - .01;
draw.t = draw.seconds*Math.PI;
cvsTimer = setTimeout(draw, 25);
};
draw.seconds = 0;
draw.t = 0;
function drawSine(t){
var x = t;
var y = Math.sin(x);
for (i = 0; i < classCount; i++) {
if(i % 2 == 0){
context[i].moveTo(0,0);
}else{
context[i].moveTo(0,height[i]);
}
}
for (i = yAxis; i <= width[0]; i += width[0]/10.5) {
x = t+(-yAxis+i)/unit;
y = Math.sin(x);
for (j = 0; j < classCount; j++) {
if(j % 2 == 0){
context[j].lineTo(i, unit*y+xAxis);
}else{
context[j].lineTo(i, unit*y+xAxis+height[j]*0.7);
}
}
}
for (i = 0; i < classCount; i++) {
if(i % 2 == 0){
context[i].lineTo(width[i],0);
}else{
context[i].lineTo(width[i],height[i]);
}
}
}
init();
}
$(function(){
contentsWave();
});
```

[masaya_ohashi]

こちらのコードはfor文の中で別メソッドを呼んでいないので、偶然iのダブリがないだけです。

[masaya_ohashi]

回答に問題のあった箇所を追記しました。

[mx3]

お忙しいなか再度回答ありがとうございます。
質問にも書きましたとおり、どこで処理がおかしくなっているのか、変数の値がおかしくなっているところがないか、数行ずつ分けてalert()などでチェックした上で質問をしました。FirebugやGoogleChromeのデバッグコンソールも使いましたがまだ不慣れで...。
そうやって最終的に、
for (i = 0; i < classCount; i++) {
context[i].moveTo(yAxis, unit*y+xAxis[i]);
の二行を消すとエラーがでなくなることがわかったので、仰るとおり「xAxis[i]」に問題があるのではないかなと「xAxis[i]」周りを数時間ずっといじっていたのですが、まったくの的外れかもしれないし、かえって混乱を招くかもしれないと思い、そういった課程を一切説明せずに質問してしまい申し訳ありませんでした。テラテイルに簡単に頼るのは良くないと、普段から私も思っていますので、質問に至るまで6時間かけて最低限のことはしたつもりですが、今後は軽々しく質問しないように気をつけます。
対応していただきありがとうございました。

[masaya_ohashi]

おお、そこまで頑張っておられたのですね…推測で物を言って申し訳ありませんでした。とりあえず、補足部分の回答は削除します。
teratailに頼ることは悪いことではありません。上から目線のアドバイスで申し訳ないですが、その「この行に問題があると思うんです」と添えてくだされば、私以外からも回答が多く得られたかと思います。漠然と質問するより、自分なりの解釈も、自信がなくても書いてくれれば回答者のヒントになりますよ！頑張ってください

[mx3]

またしばらくコードを修正して、私も波を3つ表示させることができるようになりました！

教えて頂いたとおり、下記のようにvarを付けて、

for(var i=0;i<classCount;i++){
}

xAxis[i]の[i]を削除したところ、動くようになりました！

varをつけた時にブラウザがフリーズしてしまっていた件は、Firefoxを使っていたことが原因で（負荷が大きすぎて処理できてなかったみたいです）、Chromeを使ったところエラーもなく3つとも表示されました。ただ、波がかなり高速で動いていて、透明度も３つそれぞれ違っていたので、ループの対象がおかしくなって重複してしまってるのだろうなと思います。改善試みましたがいまの私のスキルでは難しそうなので、また別の方法も探してみようと思います。

仰るとおり、今後質問する際にはきちんと、いまわかっていることも添えようと思います。
ありがとうございました！

Answer 2

initの以下の部分で取得できるcanvasが1枚もありません。
canvasにnameがついてないからです。
canvasの配列を取るならname属性をつけるか、
jQueryのセレクタでsineCanvasクラスで指定する必要があります。

canvas = document.getElementsByClassName("sineCanvas");

#追記
もう一つ、javascriptを以下のコードで囲んでいますが、これだとDOM解決前にコードが実行されます。

(function(){
})();

こっちならwindow.onloadと同じ効果を持つのでこちらにしましょう。

$(function(){
});

Comments

[mx3]

こちらもご指摘ありがとうございます！初歩的なところからもう一度見直します。