如何讓形狀移動到鼠標位置並消失？

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>

我認爲加上對於如何處理這樣的要求，將是很好的一些更多的信息。

「......移向鼠標而變得越來越小，消失......」

由於這個要求聽起來應該是涉及到小動畫，我們需要分開‘計算’和‘渲染’，所以我們需要記錄對象，顏色，大小，位置等來渲染「下一個」幀。如果我們不再看到它，我們可以從我們的記錄中刪除一個對象。

在渲染階段，我們需要獲取要渲染的對象數組，並將它們逐一繪製到畫布上。但在我們需要清除前一幀（或者更高級，更改區域的一部分，但現在讓我們清除整個畫布）之前，先畫出一切。這應該像電影一樣在幾秒鐘內完成。

p.signInterval不是理想的方法，但由於問題與動畫無關，所以我試着在示例代碼中保持快速和簡單。 requestAnimationFrame是做這種操作的更好方法。