HTML5 Canvas 圆内圆

Question

尝试使用 HTML5 Canvas 来构建它，但无法理解如何旋转内圆？或者是否有任何其他第 3 方库可以更轻松地执行此操作。

// 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()
}

<canvas id="testCanvas" width="500" height="500"></canvas>

Answer 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()
}

<canvas id="testCanvas" width="200" height="200"></canvas>

HTML5 Canvas 圆内圆

HTML5 Canvas circle inside circle

canvas

html5-canvas