HTML5画布圈内圈答案

【问题标题】：HTML5 Canvas circle inside circleHTML5画布圈内圈
【发布时间】：2021-12-31 01:49:44
【问题描述】：

尝试使用 HTML5 Canvas 构建它，但无法理解如何旋转内圈？或者是否有任何其他第三方库可以更轻松地做到这一点。

// CONSTANTS
const LAYER_3 = 3
const MAIN_RADIUS = 250

var context = document.getElementById('testCanvas').getContext('2d')

// draw a circle
context.beginPath();
context.fillStyle = 'orange'
context.arc(MAIN_RADIUS, MAIN_RADIUS, MAIN_RADIUS, 0, 2 * Math.PI, false)
context.fill()
for (i = 0; i < LAYER_3; i++) {
  const PARENT_RADIUS = (MAIN_RADIUS / 2)
  console.log(PARENT_RADIUS)
  context.beginPath();
  context.globalCompositeOperation = 'source-over'
  context.fillStyle = 'blue'
  if (i == 0) {
    context.arc(PARENT_RADIUS, MAIN_RADIUS - (PARENT_RADIUS / 2), PARENT_RADIUS / 2, 0, 2 * Math.PI, false)
  } else if (i == 1) {
    context.arc(PARENT_RADIUS, MAIN_RADIUS - (PARENT_RADIUS / 2), PARENT_RADIUS / 2, 0, 2 * Math.PI, false)
  } else if (i == 2) {
    context.arc(PARENT_RADIUS, MAIN_RADIUS - (PARENT_RADIUS / 2), PARENT_RADIUS / 2, 0, 2 * Math.PI, false)
  }
  context.closePath()
  context.fill()
}

&lt;canvas id="testCanvas" width="500" height="500"&gt;&lt;/canvas&gt;

【问题讨论】：

这在 HTML5 Canvas 中非常简单，你应该展示一些你到目前为止尝试过的代码
@HelderSepulveda 对不起，我没有添加我的代码，因为它不起作用

标签： canvas html5-canvas

【解决方案1】：

在您的代码中，您没有使用context.rotate，所以是的，圆圈不会旋转...
您可能想阅读：
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate

这是一个使用您的代码作为起点的示例

const canvas = document.getElementById('testCanvas')
const context = canvas.getContext('2d')
const PARENT_RADIUS = 100
const CHILDREN_RADIUS = 40

// Move to the center of the canvas
context.translate(canvas.width / 2, canvas.height / 2);
context.beginPath();
context.fillStyle = 'orange'
context.arc(0, 0, PARENT_RADIUS, 0, 2 * Math.PI)
context.fill()

// Draw the inner circles
context.fillStyle = 'blue'
for (i = 0; i < 3; i++) {
  context.beginPath();
  context.rotate(2 * Math.PI / 3);
  context.arc(CHILDREN_RADIUS * 1.3, 0, CHILDREN_RADIUS, 0, 2 * Math.PI)
  context.fill()
}

&lt;canvas id="testCanvas" width="200" height="200"&gt;&lt;/canvas&gt;

【讨论】：

哦，是的，谢谢。太糟糕了，我错过了轮换。