Question

我试图在另一个画布上画一个旋转圆圈。

我设法绘制圆圈，但是一旦它旋转，它就会填充旋转半径白色内的所有内容，圆圈成为一个大的连续圆圈。

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

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

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

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

Answer 2

插入

ctx2.beginPath();

在ctx2.clearRect（0,0,500,500）之前;

在上一个画布上绘制一个旋转圆圈

2 个答案: