canvas 弧形菜单

Canvas 是 HTML5 中的一个标签，用于在网页上绘制图形，包括复杂的形状如弧形。弧形菜单（Circular Menu）是一种常见的UI设计，它通常用于导航，展示成环形或半圆形的布局，其中每个选项作为一个弧形部分。

创建 Canvas 上的弧形菜单主要涉及以下几个步骤：

1. **HTML 结构**：设置一个 `canvas` 元素作为容器，并可能包含一些按钮或者其他交互元素。

<canvas id="arcMenu" width="400" height="400"></canvas>

2. **JavaScript 代码**：使用 JavaScript 和 Canvas API 来绘制弧形和添加交互逻辑。

const canvas = document.getElementById('arcMenu');
const ctx = canvas.getContext('2d');

// 设置路径数据
const center = { x: canvas.width / 2, y: canvas.height / 2 };
const radius = canvas.width / 2;
const sectors = [
  { startAngle: 0, endAngle: Math.PI * 0.75, text: 'Option 1' },
  { startAngle: Math.PI * 0.75, endAngle: Math.PI, text: 'Option 2' },
  // 更多选项...
];

// 绘制弧形
sectors.forEach(sect => {
  ctx.beginPath();
  ctx.arc(center.x, center.y, radius, sect.startAngle, sect.endAngle);
  ctx.fillStyle = '#008080'; // 颜色选择
  ctx.fill();
  ctx.save();
  ctx.translate(center.x, center.y); // 移动到中心
  ctx.rotate(sect.startAngle); // 旋转到起始角度
  ctx.fillText(sect.text, -ctx.measureText(sect.text).width / 2, 15); // 文本位置
  ctx.restore();
});

3. **交互处理**：可以通过鼠标事件监听器来响应用户点击，切换或获取当前选中的弧形区域。

canvas.addEventListener('click', e => {
  const rect = canvas.getBoundingClientRect();
  const angle = Math.atan2(e.clientY - rect.top, e.clientX - rect.left) - Math.PI / 2;
  const closestSector = sectors.find(sect => {
    return sector.startAngle <= angle && angle < sector.endAngle;
  });

  // 处理点击事件
  console.log('Clicked on:', closestSector.text);
});