Question

有人可以解释为什么画内圈吗？我的代码会绕圈，当它完成360度旋转时，它将再次绘制整个画布。我以为只会在新圆圈的边界上画球。只是为了使其更清楚（也许）。我只想画圆圈，而不画机芯的中心。这个想法是在球的圆周运动上形成一个轮廓，并每360度制作一个新轮廓（我称其为drawStage的原因）。问题图片：

https://imgur.com/pj3BtI4

https://imgur.com/Iaj4pfv

我涂成红色的部分是问题

HTML代码（tela.html）

x1 = 'x1'
x2 = 'x2'
x3 = 'x3'

JavaScript代码（Game.js）

<!DOCTYPE html>
<html>
<title>JS Game</title>
<body>
<h1>JavaScript Game</h1>
<canvas id="tela"></canvas>

<script src="Game.js"></script>
</body>

</html>

Answer 1

发生这种情况是因为画布填充了各个球之间绘制的路径。您定期在arc()内致电drawBall()，但从不致电beginPath()或endPath()。

这是我可以想到的最简单的示例（使用您的JS代码）来说明问题：删除setInterval()行，以免动画开始。然后在控制台中运行以下命令：

drawStage();
turnedAngle = 10; startWidth = 404.45625508238027; startHeight = 299.2142419960571; drawBall();
turnedAngle = 70; startWidth = 423.114564032465; startHeight = 280.45069066017015; drawBall();
turnedAngle = 150; startWidth = 408.03409582988786; startHeight = 248.52411884675797; drawBall();

请注意在3个球上绘制了三角形。

要解决此问题，只需在您的ball.beginPath()调用之前添加arc()。

用javaScript画内圆

1 个答案: