在前一个画布上画一个旋转的圆圈答案

【问题标题】：Draw a rotating circle over previous canvas在前一个画布上画一个旋转的圆圈
【发布时间】：2015-10-22 21:02:21
【问题描述】：

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

我已经画出了圆，但是一旦它旋转，它会将旋转半径内的所有东西都填充为白色，并且圆变成了一个连续的大圆。

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

这只是我真实代码中的示例代码，红色矩形是一个轮盘赌，它以相反的方向旋转这就是我有两个画布的原因。

我需要（球）是白色的，这就是我尝试使用 .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>

有人可以帮忙吗？

【问题讨论】：

除了你的问题：1）使用requestAnimationFrame而不是setInterval进行画布绘图； 2）缓存canvas.getContext("2d")的结果，这样浏览器就不需要每次都去查询DOM了。

标签： javascript html canvas rotation geometry

【解决方案1】：

插入

ctx2.beginPath();

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

【讨论】：

这很容易 :-) 非常感谢。关于使用 Javascript 绘图，我还有很多东西要学。

【解决方案2】：

您所需要的只是重新绘制计时器的每一步。这就是画布的工作原理。

【讨论】：