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

Question

骗子:

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>

我认为添加一些有关如何满足此类要求的更多信息会很好。

“...向鼠标移动，同时变小并消失...”

由于这个要求听起来应该涉及一些动画，我们需要将“计算”和“渲染”分开，因此我们需要记录对象、它们的颜色、大小、位置等以渲染“下一个” “框架。如果我们不再看到某个对象可见，我们可以从记录中删除该对象。

在渲染阶段，我们需要获取要渲染的对象数组并将它们一一绘制到 Canvas 上。但在我们需要清除前一帧(或更高级，更改区域的一部分，但现在让我们清除整个 Canvas )并绘制所有内容之前。而且这应该在一秒钟内完成几次，就像电影中一样。

p.s setInterval 不是理想的方法，但由于问题与动画无关，我试图在示例代码中保持快速和简单。 requestAnimationFrame是执行此类操作的更好方法。