Javascript实现可旋转的圆圈实例代码

下面是实现可旋转的圆圈的Javascript代码的攻略：

步骤一：HTML结构

首先，我们需要在HTML文件中创建一个canvas元素和一个用于控制旋转的按钮。

<canvas id="circle-canvas"></canvas>
<button id="rotate-button">旋转</button>

步骤二：CSS样式

接下来，我们需要设置canvas元素的样式，使其充满整个屏幕。

canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

步骤三：Javascript代码

接下来，我们需要使用Javascript来绘制圆圈并控制其旋转。下面是完整的Javascript代码：

var canvas = document.getElementById('circle-canvas');
var ctx = canvas.getContext('2d');

var rotateButton = document.getElementById('rotate-button');
rotateButton.addEventListener('click', function() {
  rotate = !rotate;
});

var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = canvas.width * 0.4;
var angle = 0;
var rotate = false;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
  ctx.strokeStyle = '#000000';
  ctx.lineWidth = 5;
  ctx.stroke();

  if (rotate) {
    angle += 0.01;
  }

  var pointX = centerX + radius * Math.cos(angle);
  var pointY = centerY + radius * Math.sin(angle);

  ctx.beginPath();
  ctx.arc(pointX, pointY, 10, 0, Math.PI * 2);
  ctx.fillStyle = '#FF0000';
  ctx.fill();

  requestAnimationFrame(draw);
}

draw();

代码说明

1. 首先，我们获取了canvas元素和绘图上下文（ctx）对象。

2. 然后，我们获取了旋转按钮，并在点击按钮时将旋转标志（rotate）更改为其相反值。这意味着每次单击按钮时，圆圈都会在旋转（true）和停止旋转（false）之间切换。

3. 接下来，我们定义了圆圈的重要属性：圆心坐标（centerX和centerY）、半径（radius）和当前角度（angle）。

4. 然后，在draw（）函数中，我们首先使用clearRect（）方法清除画布，以便我们可以重新绘制圆圈。

5. 接下来，我们开始绘制圆圈，使用画布上的arc（）方法。

6. 接下来，如果旋转标志为true（即，按钮已单击），则我们逐步增加角度值。

7. 然后，我们计算当前旋转角度下圆圈上点的坐标。

8. 最后，我们再次使用arc（）方法绘制一个小的红色圆点，表示当前旋转角度下圆圈上的点。

9. 最后，我们使用requestAnimationFrame（）方法递归调用draw（）函数，以便每个刷新周期都会绘制更新的圆圈。

示例说明

现在，我们来看两个示例说明，以便更好地理解此代码。

示例1

在第一个示例中，我们创建了一个静态圆圈，不进行旋转。这只需要将rotate值设置为false。

var rotate = false;

这样我们就可以在HTML文件中看到一个静态圆圈！

示例2：

在第二个示例中，我们创建了一个自动旋转的圆圈。

var rotate = true;

然后，我们将在每个刷新周期中逐渐增加角度值。这将使圆圈绕其圆心旋转。

if (rotate) {
  angle += 0.01;
}

现在，我们可以在页面上看到一个旋转的圆圈！并且每当单击旋转按钮时，圆圈将启动或停止旋转。