19149

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Circle</title>
    <style>
    * {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    body {
      background: url("hoge.png");
      background-size: cover;
    }
    </style>
    </head>
    <body>
      <script>
        ;(function() {
          var canvas = document.createElement("canvas"), W, H, mr, sr, mx, my, num = 6, particles = [];
          canvas.style.background = "transparent";
          var ctx = canvas.getContext("2d");
          document.body.appendChild(canvas);
    
          function Circle(ctx, deg) {
            this.ctx = ctx;
            this.deg = deg || 0;
            this.h = false;
            this.v = 0.2;
          }
    
          Circle.prototype = {
            render : function() {
              this.updatePos();
              this.draw();
            },
    
            updatePos : function() {
              this.x = Math.cos(Math.PI / 180 * this.deg) * this.mr + this.mx;
              this.y = Math.sin(Math.PI / 180 * this.deg) * this.mr + this.my;
              this.deg += this.v;
            },
            draw : function() {
              ctx = this.ctx;
              ctx.beginPath();
              if (this.h) {
                ctx.fillStyle = "rgba(255, 255, 255, 0.35)";
                ctx.arc(this.x, this.y, this.sr + 15, 0, 360 * (Math.PI / 180), false);
                ctx.fill();
              } else {
                ctx.strokeStyle = "rgba(255, 255, 255, 0.35)";
                ctx.arc(this.x, this.y, this.sr, 0, 360 * (Math.PI / 180), false);
                ctx.stroke();
              }
              ctx.closePath();
            },
            setWindow : function(W, H, mr, sr, mx, my) {
              this.W = W, this.H = H, this.mr = mr, this.sr = sr,
                  this.mx = mx, this.my = my;
            },
            hover : function(mx, my) {
              this.a = this.x - mx;
              this.b = this.y - my;
              if (this.a * this.a + this.b * this.b <= this.sr * this.sr) {
                this.h = true;
                return true;
              } else {
                this.h = false;
                return false;
              }
            },
            vSet : function(v) {
              this.v = v ? 0 : 0.2;
            }
          };
    
          for (var i = 0; i < num; i++) {
            particle = new Circle(ctx, (360 / num) * i);
            particles.push(particle);
          }
    
          function resize() {
            W = canvas.width = window.innerWidth,
                H = canvas.height = window.innerHeight,
                mr = Math.min(W, H) / 3,
                sr = Math.min(W, H) / 10,
                mx = W / 2, my = H / 2;
            for (j = 0; j < num; j++) {
              particles[j].setWindow(W, H, mr, sr, mx, my);
            }
          }
          function hover(e) {
            var mx = e.clientX, my = e.clientY;
            for (j = 0; j < num; j++) {
              if (particles[j].hover(mx, my)) {
                canvas.style.cursor = "pointer";
                for (n = 0; n < num; n++) {
                  particles[n].vSet(true);
                }
              } else {
                for (n = 0; n < num; n++) {
                  canvas.style.cursor = "default";
                  particles[n].vSet(false);
                }
              }
            }
          }
          resize();
          window.addEventListener("resize", resize, false);
          window.addEventListener("mousemove", function(e) {
            hover(e);
          }, false);
    
          (function loop() {
            ctx.clearRect(0, 0, W, H);
            particles.forEach(function(e) {
              e.render();
            });
            window.requestAnimationFrame(loop);
          }());
        }());
      </script>
    </body>
    </html>
    
[/code]

いずれかのパーティクル（円）にマウスが重なった時に、

  1. 円を拡大して塗りつぶす
  2. アニメーションを止める（すべての円）
  3. カーソル変更

をさせたいです。

1.は実装できたのですが、2.と3.が1つのパーティクルにしか適応されなくて詰んでいます。  
ご教授頂けると幸いです。。。  
あと初心者のなのでクソコードだったらごめんなさい(´・ω・`)


CC BY-SA 3.0
2015-11-21T22:26:24.537
19148
2015-11-22T00:48:46.193
2015-11-22T00:32:20.853
5778
13361
question
javascript html5-canvas
全てのパーティクルに対して同じ処理を実装させたい[canvas]


訂正箇所としては、function hover(e) の中で記載されているループで、以下を満たせばよいと思いますので

[code]

    for (j = 0; j < num; j++) {
      // どの円でもホバーされていたら動作を止める
    }
    
[/code]

一番最小の修正で済ますなら、次のようにすると良いでしょう。

[code]

    function hover(e) {
      var mx = e.clientX, my = e.clientY;
      for (j = 0; j < num; j++) {
        if (particles[j].hover(mx, my)) {
          canvas.style.cursor = "pointer";
          for (n = 0; n < num; n++) {
            particles[n].vSet(true);
          }
          // ホバーを停止したので、これ以上は調べない
          return;
        } else {
          for (n = 0; n < num; n++) {
            canvas.style.cursor = "default";
            particles[n].vSet(false);
          }
        }
      }
    }
    
[/code]

なぜ1つの円だけ2.と3.が動作するかの理由はまさしくここで、今回はnum=6で設定されておりますので、particlesの0～5全てに対し、ホバーしているかをループして検出しています。

例えばparticles[0].hover が
trueになったとき、確かにすべてのparticlesに対しvSet(true)が実行され、一旦すべての動作が停止をするのですが、particles1～5の検出が引きつづき行われるため、その他のparticlesではホバーしていないため、全てのparticlesに再びvSet(false)を実行してしまいます。

1つの円だけきちんと動作している理由は、particles[5]をホバーしていたからです。

以上です。


CC BY-SA 3.0
2015-11-22T00:48:46.193
19149
2015-11-22T00:48:46.193
5778
19148
answer