為什么context.clearRect（）在requestAnimationFrame循環中不起作用？

Question

我的頁面上有一個canvas元素，上面有一個繪制並移動的圓圈。 在循環的每次迭代中，圓都移動了一個像素。 這是代碼。

  function clearPage() { context.clearRect(0,0,300, 150); }; var canvasEl = document.getElementById("main"); var context = canvasEl.getContext('2d'); context.fillStyle = 'red'; context.strokeStyle = 'red'; var x = 0; function moveCircle() { clearPage(); context.arc(x, 75, 20, 0, 2* Math.PI); context.stroke(); x++; window.requestAnimationFrame(moveCircle); } moveCircle();

 canvas { border: 1px solid black; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <title>Canvas Practice</title> </head> <body> <canvas id='main'></canvas> <script src="main.js"></script> </body> </html>

顯而易見，我的函數在繪制新圓之前先清除了頁面。 盡管運行時，您會看到它在頁面上留下了先前繪制的圓圈。 如果要在動畫完成后調用clearPage（）函數，則整個頁面將如預期般被清除。

最重要的是，我只想知道為什么會這樣。 它似乎並不完全直觀，但我最大的猜測是它與requestAnimationFrame（）的行為有關。

Answer 1

您應該使用context.beginPath(); 在繪制圓弧之前。

原因是將弧添加到同一路徑，因此每個命令都會重繪整個路徑（請參閱https://www.w3.org/TR/2dcontext/#dom-context-2d-arc ）。 使用beginPath為每個弧線啟動一個新路徑，因此不會重繪以前的弧線。

 function clearPage() { context.clearRect(0,0,300, 150); }; var canvasEl = document.getElementById("main"); var context = canvasEl.getContext('2d'); context.fillStyle = 'red'; context.strokeStyle = 'red'; var x = 0; function moveCircle() { clearPage(); context.beginPath(); context.arc(x, 75, 20, 0, 2* Math.PI); context.stroke(); x++; window.requestAnimationFrame(moveCircle); } moveCircle();

 canvas { border: 1px solid black; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <title>Canvas Practice</title> </head> <body> <canvas id='main'></canvas> <script src="main.js"></script> </body> </html>

為什么context.clearRect（）在requestAnimationFrame循環中不起作用？

問題描述

1 個解決方案

解決方案1
1 已采納 2016-09-11 20:55:31

為什么context.clearRect（）在requestAnimationFrame循環中不起作用？

問題描述

1 個解決方案

解決方案1 1 已采納 2016-09-11 20:55:31

解決方案1
1 已采納 2016-09-11 20:55:31