javascript - 为什么点击时 Canvas 框的移动会增加？

Question

附加的 Js Fiddle 在单击鼠标的地方绘制一个框。它在很大程度上按预期工作。除了每次在 Canvas 上绘制新框时，它的速度每次都会越来越快，以至于速度太快了。

我已经 console.log 编辑了 dx/dy 值，并且它们的值没有增加，所以我认为不是这样的。

dx 值是框移动的位置。

有人可以透露一些信息吗？

var canvas = document.getElementById('myCanvas');
    var logger = document.getElementById('logger');
    var ctx = canvas.getContext('2d');
    var x = 0;
    var y = 0;
    var dx = -2;
    var dy = -2;
    var boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    var boxSize = 20;
    var mousex,
        mousey;
    
    canvas.addEventListener('click',function(e){
      mousex = e.clientX;
      mousey = e.clientY;
      x = mousex - canvas.offsetLeft-(boxSize/2);
      y = mousey - canvas.offsetTop-(boxSize/2);
      draw();
    });
    
    function draw(){
      logger.innerHTML = "x: " + x + "y: " + y;
      ctx.clearRect(0,0,canvas.width,canvas.height);
      collistionDetection();
      ctx.beginPath();
      ctx.rect(x,y,boxSize,boxSize);
      ctx.fillStyle=boxColour;
      ctx.fill();
      ctx.closePath();
      x+=dx;
      y+=dy;
      requestAnimationFrame(draw);
    };
    
    function collistionDetection(){
      if(x<0 || x>canvas.width-boxSize){
        dx = -dx;
        boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
      };
      if(y<canvas.offsetTop-(boxSize/2) || y>canvas.height-boxSize){
        boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
        dy = -dy;
      };
    };

* { padding: 0; margin: 0; }
    canvas { background: #eee; display: block;
      margin: 0 auto; margin-top:10px;
      }

<canvas id="myCanvas" width='480' height='320'></canvas>
<div id="logger"></div>

非常感谢您的帮助。
谢谢
教育部

Answer 1

我认为您的 requestAnimationFrames 没有被清除，因此您的动画函数只是在每次单击时被越来越频繁地调用。我对下面的代码做了一个小小的更改，这似乎有帮助。

    var canvas = document.getElementById('myCanvas');
    var logger = document.getElementById('logger');
    var ctx = canvas.getContext('2d');
    var x = 0;
    var y = 0;
    var dx = -2;
    var dy = -2;
    var boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    var boxSize = 20;
    var mousex,
        mousey;
    var lastAnimationFrame;
    canvas.addEventListener('click',function(e){
      mousex = e.clientX;
      mousey = e.clientY;
      x = mousex - canvas.offsetLeft-(boxSize/2);
      y = mousey - canvas.offsetTop-(boxSize/2);
      cancelAnimationFrame(lastAnimationFrame)
      draw();
    });
    
    function draw(){
      logger.innerHTML = "x: " + x + "y: " + y;
      ctx.clearRect(0,0,canvas.width,canvas.height);
      collistionDetection();
      ctx.beginPath();
      ctx.rect(x,y,boxSize,boxSize);
      ctx.fillStyle=boxColour;
      ctx.fill();
      ctx.closePath();
      x+=dx;
      y+=dy;
      lastAnimationFrame = requestAnimationFrame(draw);
    };
    
    function collistionDetection(){
      if(x<0 || x>canvas.width-boxSize){
        dx = -dx;
        boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
      };
      if(y<canvas.offsetTop-(boxSize/2) || y>canvas.height-boxSize){
        boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
        dy = -dy;
      };
    };

    * { padding: 0; margin: 0; }
    canvas { background: #eee; display: block;
      margin: 0 auto; margin-top:10px;

<canvas id="myCanvas" width='480' height='320'></canvas>
<div id="logger"></div>