为什么我的画布框的移动在点击时会增加？

Question

The Js Fiddle attached draw a box where ever the mouse is clicked. It works as expected for the most part. Except every time a new box is drawn on the canvas it speeds up more and more every time to the point where it's way too fast.

I've console.log ed the dx/dy values and they are not increasing in value so it's not that, I don't think.

The dx value is what the position of the box is moving by.

Can any one shed some light?

 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> 

Your help is always much appreciated.
Thanks
moe

Answer 1

I think your requestAnimationFrames are not being cleared so your animation function is just being called more and more frequently every time you click. I made a small change to your code below which seems to help.

  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> 

Answer 2

Because by each mouse click, you are calling draw once again, and this call, as apparent in your code, is recursive and keeps calling itself. So, by each click, you have a chain of calls to draw .

You can add a boolean to check whether draw has initially been called, and if so, prevent subsequent calls inside your draw function:

if(!initialized)
{
    requestAnimationFrame(draw);
    initialized = true;
}