Question

Plunker：

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

我有什么：

当鼠标移动时，圆圈会在设定的半径上随机出现。

我想要的是什么：

新出现的圆圈朝向鼠标移动而变小，当非常小时消失。

将其视为一种重力效应，或将鼠标视为一种集中能量的魔杖。

问题：

如何在export class MyApp { rootPage = HomePage; constructor(platform: Platform, public push: Push) { platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. StatusBar.styleDefault(); Splashscreen.hide(); }); alert("App Started"); this.push.register().then((t: PushToken) => { return this.push.saveToken(t); }).then((t: PushToken) => { console.log('Token saved:', t.token); }); this.push.rx.notification() .subscribe((msg) => { alert(msg.title + ': ' + msg.text); }); } }上实现我的目标？

Answer 1

这样的东西？（有关信息，请参阅代码更改）

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

我认为增加一些关于如何处理这种要求的信息会很好。

＆＃34; ...朝小鼠移动，同时变小并消失......＆＃34;

由于这个要求听起来应该涉及一些动画，我们需要分开＆＃34;计算＆＃34;和＃34;渲染＆＃34;因此我们需要记录对象，颜色，大小，位置等，以便呈现＆＃34; next＆＃34;帧。如果我们不再看到对象，我们可以从记录中删除对象。

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

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

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

1 个答案: