画布在一段时间后开始滞后

Question

Reproduction: focus your mouse on canvas , then spin your mouse in circles for ~15 sec. At first you'll notice how things are smooth. After some time it starts to lose its smoothness and becomes really laggy.

Part of the js function came from the following answer

Make moving Rect more smooth

 var canvas = document.getElementById('canvas'); var ctx = document.getElementById('canvas').getContext('2d'); var x; var y; var tx = tx || 0; var ty = ty || 0; var xDir; var yDir; function followMouse(e) { x = e.offsetX; y = e.offsetY; moveObject(); } function moveObject() { ctx.clearRect(0, 0, canvas.width, canvas.height); var scale = 0.2 * Math.max(canvas.width, canvas.height); xDir = 0; yDir = 0; xDir = (x - tx) / scale; yDir = (y - ty) / scale; tx = tx != x ? tx + xDir : tx; ty = ty != y ? ty + yDir : ty; ctx.fillRect(tx - 25, ty + 25, 50, 10); if (tx != x || ty != y) { window.requestAnimationFrame(moveObject); } } function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }; canvas.addEventListener('mousemove', _.throttle(function(e) { followMouse(e); }, 30)); window.addEventListener('resize', resizeCanvas, false); resizeCanvas(); 

 html, body { margin: 0; height: 100%; } canvas { display: block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> <canvas id="canvas"></canvas> 

Answer 1

This happens as for each mousemove a new loop is started. These loops will accumulate and eventually slow things down.

To solve you can implement cancelAnimationFrame() by doing:

...
var timer;

function followMouse(e) {
  x = e.offsetX;
  y = e.offsetY;
  cancelAnimationFrame(timer);
  moveObject();
}

Then store timer reference in the main loop:

...
timer = requestAnimationFrame(moveObject);

This will abort the current request for frame update and allow you to start a new loop without accumulating calls.

For this reason you would also have to initialize x and y since they are not initialized otherwise until the mouse has been moved (which is of course no guarantee).

var x = 0;
var y = 0;

Note: A side-effect of this correction is that now the movement is only calculated once per frame. When accumulated the movement got calculated many times per frame. To compensate adjust the scale to a lower value (shown below).

Modified example

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var x = 0; var y = 0; var tx = tx || 0; var ty = ty || 0; var xDir; var yDir; var timer; function followMouse(e) { x = e.clientX; y = e.clientY; cancelAnimationFrame(timer); moveObject(); } function moveObject() { ctx.clearRect(0, 0, canvas.width, canvas.height); var scale = 0.02 * Math.max(canvas.width, canvas.height); xDir = 0; yDir = 0; xDir = (x - tx) / scale; yDir = (y - ty) / scale; tx = tx != x ? tx + xDir : tx; ty = ty != y ? ty + yDir : ty; ctx.fillRect(tx - 25, ty + 25, 50, 10); if (tx != x || ty != y) { timer = requestAnimationFrame(moveObject); } } function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }; canvas.addEventListener('mousemove', _.throttle(function(e) { followMouse(e); }, 30)); window.addEventListener('resize', resizeCanvas, false); resizeCanvas(); 

 html, body { margin: 0; height: 100%; } canvas { display: block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> <canvas id="canvas"></canvas>