如何让形状移动到鼠标位置并消失？

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是做这种操作的更好方法。