シェイプをマウスの位置に移動して消える方法は？

Question

Plunker：

https://plnkr.co/edit/7XslB1DDwLsAV6YAurFO?p=preview

---

は私が持っているもの：

円はマウスポインタが移動すると、設定された半径にランダムに表示されます。

---

私が欲しいもの：

新しく登場した円は小さくなっている間にマウスに向かって移動し、ときに、非常に小さな消えます。

エネルギーを集中させる魔法の杖や重力効果と考えることができます。

---

質問：

どのように私は私がcanvasに欲しいものを達成することができますか？

Answer 1

このようなものはありますか？ 私は要件のこの種にアプローチする方法についていくつかの詳細情報を追加することはいいことだと思い

var canvas = document.getElementById("canvas"); 
 
      canvas.width = window.innerWidth; 
 
      canvas.height = window.innerHeight; 
 
    
 
      var context = canvas.getContext("2d"); 
 

 
      function createImageOnCanvas(imageId) { 
 
       canvas.style.display = "block"; 
 
       document.getElementById("circles").style.overflowY = "hidden"; 
 
       var img = new Image(300, 300); 
 
       img.src = document.getElementById(imageId).src; 
 
       context.drawImage(img, (0), (0)); //onload.... 
 
      } 
 
      
 
      var circles = []; 
 
      var pos = {x:0, y:0}; 
 

 
      function draw(e) { 
 
        context.clearRect(0,0,1000,1000); 
 
          
 
       for(var i=0; i<circles.length; i++) { 
 
        
 
        var circle = circles[i]; 
 
        
 
        var x = circle.x + circle.radius*Math.cos(circle.angle); 
 
        var y = circle.y + circle.radius*Math.sin(circle.angle); 
 

 
        context.fillStyle = "rgba(255,255,255,0.5)"; 
 
        context.beginPath(); 
 
        context.arc(x, y, 10 * circle.radius/50, 0, 2*Math.PI); 
 
        context.fill(); 
 
       } 
 
       
 
      } 
 
      
 
      // we are storing the mouse position on move 
 
      // to be used by animation rendering when needed 
 

 
      var mouseMoved = false; 
 
      function onMouseMove(evt) { 
 
       storeMousePosition(evt); 
 
       
 
       // enable new circle creation 
 
       mouseMoved = true; 
 
      } 
 
      
 
      
 
      function storeMousePosition(evt) { 
 
       var rect = canvas.getBoundingClientRect(); 
 
       pos = { 
 
       x: evt.clientX - rect.left, 
 
       y: evt.clientY - rect.top 
 
       };    
 
      } 
 
      
 
      // update positions and sizes of circles 
 
      // remove ones smaller 
 
      // create new circles if mouse is moved 
 
      function updateCircles() { 
 
       var ncircles = []; 
 
       for(var i=0; i<circles.length; i++) { 
 
       var circle = circles[i]; 
 
       if(circle.radius > 5) { 
 
        circle.sradius--; 
 
        if(circle.sradius < 40) { 
 
        circle.radius--; 
 
        circle.x = pos.x; 
 
        circle.y = pos.y; 
 
        } 
 
        ncircles.push(circle); 
 
       } 
 
       } 
 
       if(mouseMoved) { 
 
       // disable creating new circlus 
 
       // if mouse is stopped 
 
       mouseMoved = false; 
 
       
 
       
 
       posx = pos.x; 
 
       posy = pos.y; 
 

 
       var radius = 50; 
 
       
 
       var angle=Math.random()*Math.PI*2; 
 
       
 
       ncircles.push({ 
 
        radius: radius, 
 
        sradius: radius, 
 
        angle: angle, 
 
        x: pos.x, 
 
        y: pos.y 
 
       }) 
 
       } 
 
       
 
       circles = ncircles; 
 
       draw(); 
 
      } 
 
      
 

 
      window.draw = draw; 
 
      
 
      // update circles and re-render the frame 
 
      // in every 40 milliseconds 
 
      setInterval(updateCircles, 40);

canvas { 
 
       border: 1px solid #000; 
 
       background-color: black; 
 
       margin-left: -10px; 
 
       margin-top: -10px; 
 
      }

<div id="circles"></div> 
 
     <canvas id="canvas" onmousemove="onMouseMove(event)"></canvas>

（情報のためのコードの変更を参照してください）。

「...小さくなったり消えたりしながら、マウスに向かって移動...」

この要件が関与少しアニメーションがあるはず聞こえるように、私たちは 『計算』を分離する必要があるので、 『レンダリング』私たちはオブジェクト、その色、サイズ、位置などを記録して、「次の」フレームをレンダリングする必要があります。オブジェクトが表示されなくなった場合、レコードからオブジェクトを削除できます。

レンダリングステージでは、レンダリングするオブジェクトの配列を取得し、それらをキャンバスに1つずつ描画する必要があります。しかし、前のフレーム（またはより高度な、変更された領域の一部ですが、今はキャンバス全体をクリアしてください）をクリアしてすべてを描画する必要がある前に、そして、これは映画のように数秒で何度もやらなければなりません。

p.ssetIntervalは理想的な方法ではありませんが、質問はアニメーションに関連していないので、サンプルコードでは素早く簡単にするようにしました。 requestAnimationFrameは、この種の操作を実行するためのより良い方法です。