为什么context.clearRect（）在requestAnimationFrame循环中不起作用？ [英] Why doesn't context.clearRect() work inside requestAnimationFrame loop?
问题描述
我在页面上有一个canvas元素，上面有一个绘制和移动的圆圈。在循环的每次迭代中，圆都移动了一个像素。这是代码。
I have a canvas element on the page that is having a circle drawn and moved on it. The circle is being moved by one pixel in every iteration of the loop. Here is the code.
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（）函数，整个页面将像预期的那样被清除。
As is evident, my function clears the page before drawing the new circle. Though when run, you can see that it leaves the previously drawn circles on the page. If you were to call the clearPage() function after it finished animating, the whole page would get cleared like expected.
最重要的是，我只是想知道为什么这样做正在发生。它似乎并不完全直观，但我最大的猜测是它与requestAnimationFrame（）的行为有关。
More than anything, I just want to know why this is happening. It doesn't seem to be completely intuitive but my best guess is that it has to do with the behavior of requestAnimationFrame();
推荐答案
绘制圆弧之前，应使用 context.beginPath（）; 。
You should use the context.beginPath(); before drawing the arc.
原因是圆弧被添加到同一路径，因此每个命令都会重绘整个路径（请参见 https://www.w3.org/TR/2dcontext/#dom-context-2d-arc ）。使用 beginPath 为每个弧线开始一个新路径，因此不会重绘以前的弧线。
The reason is that the arcs are added to to the same path so each command redraws the whole path (see https://www.w3.org/TR/2dcontext/#dom-context-2d-arc). Using the beginPath starts a new path for each arc and thus does not redraw the previous ones.
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循环中不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
