在之前的 canvas 上画一个旋转圆圈

Question

我正在尝试在另一个 canvas 上绘制一个旋转圆圈。

我成功画出了圆，但是一旦它旋转，它就会把旋转半径内的所有东西都填满白色，然后圆就变成了一个连续的大圆。

我只想要一个像行星绕太阳一样围绕canvas中心旋转的小圆

这只是我真实代码中的示例代码，红色矩形是一个沿相反方向旋转的轮盘，这就是我有两个 canvas.

的原因

我需要（球）是白色的，这就是为什么我尝试使用 .fillstyle 和 fill() 但它不能按我想要的方式工作。

这是我的代码：

<html>
<head>
</head>
<body>
  <style>
    #container { position: relative; }
    .canvas { position: absolute; top: 0; left: 0; }
  </style>
  <div id = 'container'>
    <canvas class = "canvas" id= "rectangleCanvas" width = "500" height= "500" style = "z-index : 1" ></canvas>
    <canvas class = "canvas" id= "ballCanvas" width = "500" height= "500" style = "z-index : 2"></canvas>
  </div>
  <script type="text/javascript">
    function drawRectangle(){
      var canvas = document.getElementById("rectangleCanvas")
      ctx = canvas.getContext("2d");
      ctx.fillStyle = 'red';
      ctx.fillRect(0,0,500,500);
    };
    drawRectangle();
    function drawBall(){
      var canvas = document.getElementById("ballCanvas");
      if(canvas.getContext){
        ctx2 = canvas.getContext("2d");
        ctx2.strokeStyle = 'black';
        ctx2.fillStyle = 'white';
        ctx2.clearRect(0, 0, 500, 500);
        ctx2.translate(250,250);
        ctx2.rotate(Math.PI / -180);
        ctx2.translate(-250, -250);
        ctx2.arc(250,65,10,0,2*Math.PI);
        ctx2.stroke();
        ctx2.fill();
      }
    }
    setInterval(drawBall,5);
  </script>
</body>

有人可以帮忙吗？

Answer 1

您只需重新绘制计时器的每一步重新排列即可。这就是 canvas 的工作原理。

Answer 2

插入

ctx2.beginPath();

在 ctx2.clearRect(0, 0, 500, 500);

之前

在之前的 canvas 上画一个旋转圆圈

Draw a rotating circle over previous canvas

html

javascript

geometry

canvas

rotation