Canvas绘制五角星：前端开发实战指南-代码聚汇网

Canvas绘制五角星：前端开发实战指南

Canvas绘图五角星绘制前端开发

|难度：普通|阅读约 35 分钟

1. 为什么前端开发者需要掌握Canvas绘图？

五角星作为一种基础几何图形，在Web开发中有着广泛的应用场景。从评分系统的星级展示，到节日主题的装饰元素，再到游戏中的特效表现，五角星几乎无处不在。传统实现方式通常依赖SVG或图片资源，但这些方案在动态调整和性能优化方面存在明显局限。

Canvas作为HTML5的核心绘图API，提供了像素级的绘图控制能力。与DOM操作相比，Canvas的最大优势在于：

高性能：直接操作像素，避免了DOM重排重绘的开销
灵活性：可以实时修改图形属性（颜色、大小、旋转角度等）
动态性：适合实现动画和交互效果
兼容性：所有现代浏览器都支持Canvas API

对于前端开发者来说，掌握Canvas绘图技术不仅能解决特定场景下的UI需求，更能拓展技术边界，实现更丰富的可视化效果。特别是在数据可视化、游戏开发、创意互动等领域，Canvas几乎是必备技能。

提示：虽然Canvas API学习曲线相对平缓，但要想精通各种绘图技巧，需要理解坐标系、路径绘制、变换等基础概念。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 五角星绘制的数学原理与基础实现

2.1 五角星的几何特性

五角星（五角星形）本质上是由五条直线段组成的星形多边形。在几何学中，正五角星（五角星形）可以内接于圆，其五个顶点均匀分布在圆周上。绘制五角星的关键在于确定这五个顶点的坐标位置。

正五角星的数学特性：

中心角：72度（360°/5）
顶点间隔：144度（2×72°）
内外半径比：约0.382（黄金分割比的倒数）

2.2 Canvas绘制五角星的基本步骤

在Canvas中绘制五角星主要使用路径（Path）API，基本流程如下：

确定中心点坐标(x,y)和外接圆半径r
计算五个外顶点和内顶点的坐标
使用beginPath()开始路径绘制
使用moveTo()和lineTo()连接顶点
使用closePath()闭合路径
使用fill()或stroke()进行填充或描边

基础实现代码示例：

javascript复制function drawStar(ctx, x, y, radius) {
  ctx.beginPath();
  for (let i = 0; i < 5; i++) {
    // 外顶点
    const outerX = x + radius * Math.cos((Math.PI / 180) * (i * 72 - 18));
    const outerY = y + radius * Math.sin((Math.PI / 180) * (i * 72 - 18));
    // 内顶点
    const innerRadius = radius * 0.382;
    const innerX = x + innerRadius * Math.cos((Math.PI / 180) * (i * 72 + 18));
    const innerY = y + innerRadius * Math.sin((Math.PI / 180) * (i * 72 + 18));
    
    if (i === 0) {
      ctx.moveTo(outerX, outerY);
    } else {
      ctx.lineTo(outerX, outerY);
    }
    ctx.lineTo(innerX, innerY);
  }
  ctx.closePath();
  ctx.fillStyle = 'gold';
  ctx.fill();
}

2.3 绘制过程中的常见问题与调试技巧

初学者在实现五角星绘制时经常会遇到以下问题：

顶点位置不正确：通常是因为角度计算错误，确保使用弧度制（Math.PI）或正确转换角度
图形不闭合：忘记调用closePath()或路径连接顺序错误
比例失调：内外半径比不合适导致星形变形
坐标系混淆：Canvas的Y轴向下为正方向，与数学坐标系相反

调试建议：

使用ctx.stroke()先绘制轮廓，确认形状正确后再填充
在关键点绘制小圆标记顶点位置
使用console.log输出坐标值进行验证

3. 五角星样式的高级定制技巧

3.1 控制五角星的尖锐程度

五角星的"尖锐度"由内外半径比决定。标准的正五角星内外半径比约为0.382（黄金分割比的倒数），但我们可以通过调整这个比例来创建不同风格的星形：

javascript复制function drawCustomStar(ctx, x, y, outerRadius, innerRatio) {
  const innerRadius = outerRadius * innerRatio;
  // 其余绘制逻辑与基础实现相同
}

不同比例的效果：

0.2：非常尖锐的星形
0.382：标准五角星（黄金比例）
0.5：较为圆润的星形
0.5：接近五边形的形状

3.2 添加描边与渐变效果

Canvas提供了丰富的样式API来增强五角星的视觉效果：

描边效果：

javascript复制ctx.lineWidth = 3; // 线宽
ctx.strokeStyle = '#333'; // 描边颜色
ctx.fillStyle = 'gold'; // 填充颜色
ctx.fill(); // 先填充
ctx.stroke(); // 后描边，避免描边被填充覆盖

线性渐变：

javascript复制const gradient = ctx.createLinearGradient(x - radius, y, x + radius, y);
gradient.addColorStop(0, '#ffcc00');
gradient.addColorStop(1, '#ff6600');
ctx.fillStyle = gradient;

径向渐变：

javascript复制const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
gradient.addColorStop(0, '#ffffff');
gradient.addColorStop(1, '#ffcc00');
ctx.fillStyle = gradient;

3.3 创建3D立体效果

通过叠加多层五角星并调整颜色和偏移，可以模拟简单的3D效果：

javascript复制function draw3DStar(ctx, x, y, radius, layers) {
  for (let i = layers; i > 0; i--) {
    const currentRadius = radius * (i / layers);
    const offset = (layers - i) * 2;
    ctx.fillStyle = `rgba(255, ${200 - i * 30}, 0, ${0.5 + i * 0.1})`;
    drawStar(ctx, x + offset, y + offset, currentRadius);
  }
}

3.4 动态旋转动画

结合requestAnimationFrame可以实现五角星的旋转动画：

javascript复制let angle = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate((Math.PI / 180) * angle);
  ctx.translate(-x, -y);
  drawStar(ctx, x, y, radius);
  ctx.restore();
  angle += 1;
  requestAnimationFrame(animate);
}
animate();

4. 实战应用：构建五角星生成器组件

4.1 组件设计与参数配置

基于前面的绘制技术，我们可以创建一个可配置的五角星生成器组件，主要参数包括：

javascript复制const config = {
  x: 100, // 中心点x坐标
  y: 100, // 中心点y坐标
  radius: 50, // 外半径
  innerRatio: 0.382, // 内外半径比
  fillColor: 'gold', // 填充颜色
  strokeColor: '#333', // 描边颜色
  strokeWidth: 2, // 描边宽度
  rotation: 0, // 旋转角度(度)
  points: 5, // 顶点数(支持其他星形)
  opacity: 1 // 透明度
};

4.2 响应式绘制与性能优化

当需要绘制大量五角星或频繁更新时，需要考虑性能优化：

离屏Canvas：将静态五角星绘制到离屏Canvas，然后通过drawImage复制
脏矩形重绘：只重绘发生变化的部分区域
批量绘制：合并相似样式的五角星绘制调用

javascript复制// 离屏Canvas示例
const offscreenCanvas = document.createElement('canvas');
const offscreenCtx = offscreenCanvas.getContext('2d');
// 在离屏Canvas上绘制
drawStar(offscreenCtx, radius, radius, radius);
// 在主Canvas上复制
ctx.drawImage(offscreenCanvas, x - radius, y - radius);

4.3 交互功能实现

为五角星添加交互功能可以增强用户体验：

点击检测：

javascript复制canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;
  
  // 简单的矩形检测
  if (mouseX >= x - radius && mouseX <= x + radius &&
      mouseY >= y - radius && mouseY <= y + radius) {
    console.log('Star clicked!');
  }
  
  // 更精确的路径检测
  if (ctx.isPointInPath(mouseX, mouseY)) {
    console.log('精确点击检测');
  }
});

拖拽旋转：

javascript复制let isDragging = false;
let startAngle = 0;
let startRotation = 0;

canvas.addEventListener('mousedown', (e) => {
  const rect = canvas.getBoundingClientRect();
  const mouseX = e.clientX - rect.left - x;
  const mouseY = e.clientY - rect.top - y;
  const distance = Math.sqrt(mouseX * mouseX + mouseY * mouseY);
  
  if (distance <= radius) {
    isDragging = true;
    startAngle = Math.atan2(mouseY, mouseX);
    startRotation = config.rotation;
  }
});

canvas.addEventListener('mousemove', (e) => {
  if (isDragging) {
    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left - x;
    const mouseY = e.clientY - rect.top - y;
    const currentAngle = Math.atan2(mouseY, mouseX);
    config.rotation = startRotation + (currentAngle - startAngle) * 180 / Math.PI;
    render();
  }
});

canvas.addEventListener('mouseup', () => {
  isDragging = false;
});

4.4 完整组件代码示例

javascript复制class StarGenerator {
  constructor(canvas, options = {}) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.config = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      radius: 50,
      innerRatio: 0.382,
      fillColor: 'gold',
      strokeColor: '#333',
      strokeWidth: 2,
      rotation: 0,
      points: 5,
      opacity: 1,
      ...options
    };
    this.initEvents();
    this.render();
  }
  
  render() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.ctx.save();
    this.ctx.translate(this.config.x, this.config.y);
    this.ctx.rotate((Math.PI / 180) * this.config.rotation);
    this.ctx.translate(-this.config.x, -this.config.y);
    
    this.ctx.beginPath();
    const angleStep = (Math.PI * 2) / this.config.points;
    const halfAngleStep = angleStep / 2;
    
    for (let i = 0; i < this.config.points; i++) {
      // 外顶点
      const outerX = this.config.x + this.config.radius * Math.cos(i * angleStep - Math.PI / 2);
      const outerY = this.config.y + this.config.radius * Math.sin(i * angleStep - Math.PI / 2);
      
      // 内顶点
      const innerRadius = this.config.radius * this.config.innerRatio;
      const innerX = this.config.x + innerRadius * Math.cos(i * angleStep + halfAngleStep - Math.PI / 2);
      const innerY = this.config.y + innerRadius * Math.sin(i * angleStep + halfAngleStep - Math.PI / 2);
      
      if (i === 0) {
        this.ctx.moveTo(outerX, outerY);
      } else {
        this.ctx.lineTo(outerX, outerY);
      }
      this.ctx.lineTo(innerX, innerY);
    }
    
    this.ctx.closePath();
    this.ctx.globalAlpha = this.config.opacity;
    this.ctx.fillStyle = this.config.fillColor;
    this.ctx.fill();
    
    if (this.config.strokeWidth > 0) {
      this.ctx.lineWidth = this.config.strokeWidth;
      this.ctx.strokeStyle = this.config.strokeColor;
      this.ctx.stroke();
    }
    
    this.ctx.restore();
  }
  
  initEvents() {
    let isDragging = false;
    let startAngle = 0;
    let startRotation = 0;
    
    this.canvas.addEventListener('mousedown', (e) => {
      const rect = this.canvas.getBoundingClientRect();
      const mouseX = e.clientX - rect.left - this.config.x;
      const mouseY = e.clientY - rect.top - this.config.y;
      const distance = Math.sqrt(mouseX * mouseX + mouseY * mouseY);
      
      if (distance <= this.config.radius) {
        isDragging = true;
        startAngle = Math.atan2(mouseY, mouseX);
        startRotation = this.config.rotation;
      }
    });
    
    this.canvas.addEventListener('mousemove', (e) => {
      if (isDragging) {
        const rect = this.canvas.getBoundingClientRect();
        const mouseX = e.clientX - rect.left - this.config.x;
        const mouseY = e.clientY - rect.top - this.config.y;
        const currentAngle = Math.atan2(mouseY, mouseX);
        this.config.rotation = startRotation + (currentAngle - startAngle) * 180 / Math.PI;
        this.render();
      }
    });
    
    this.canvas.addEventListener('mouseup', () => {
      isDragging = false;
    });
  }
  
  updateConfig(newConfig) {
    this.config = { ...this.config, ...newConfig };
    this.render();
  }
}

// 使用示例
const canvas = document.getElementById('starCanvas');
const starGenerator = new StarGenerator(canvas, {
  radius: 80,
  fillColor: 'rgba(255, 215, 0, 0.7)',
  strokeColor: 'rgba(139, 69, 19, 0.9)',
  strokeWidth: 3
});

// 动态更新示例
document.getElementById('colorPicker').addEventListener('input', (e) => {
  starGenerator.updateConfig({ fillColor: e.target.value });
});

5. 五角星在真实项目中的应用案例

5.1 评分系统实现

五角星常用于商品评分、电影评价等场景。以下是一个简单的星级评分组件实现：

javascript复制class StarRating {
  constructor(container, options = {}) {
    this.container = container;
    this.config = {
      count: 5,
      size: 30,
      spacing: 5,
      value: 0,
      color: '#ccc',
      activeColor: '#ffcc00',
      editable: true,
      ...options
    };
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext('2d');
    this.setupCanvas();
    this.container.appendChild(this.canvas);
    if (this.config.editable) {
      this.initEvents();
    }
    this.render();
  }
  
  setupCanvas() {
    const width = this.config.count * (this.config.size + this.config.spacing) - this.config.spacing;
    this.canvas.width = width;
    this.canvas.height = this.config.size;
    this.canvas.style.width = `${width}px`;
    this.canvas.style.height = `${this.config.size}px`;
  }
  
  render() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    const fullStars = Math.floor(this.config.value);
    const partialStar = this.config.value - fullStars;
    
    for (let i = 0; i < this.config.count; i++) {
      const x = i * (this.config.size + this.config.spacing) + this.config.size / 2;
      const y = this.config.size / 2;
      const radius = this.config.size / 2 * 0.9;
      
      if (i < fullStars) {
        this.drawStar(x, y, radius, this.config.activeColor);
      } else if (i === fullStars && partialStar > 0) {
        this.drawPartialStar(x, y, radius, partialStar, this.config.activeColor, this.config.color);
      } else {
        this.drawStar(x, y, radius, this.config.color);
      }
    }
  }
  
  drawStar(x, y, radius, color) {
    this.ctx.save();
    this.ctx.fillStyle = color;
    this.ctx.beginPath();
    for (let i = 0; i < 5; i++) {
      const outerX = x + radius * Math.cos((Math.PI / 180) * (i * 72 - 18));
      const outerY = y + radius * Math.sin((Math.PI / 180) * (i * 72 - 18));
      const innerRadius = radius * 0.382;
      const innerX = x + innerRadius * Math.cos((Math.PI / 180) * (i * 72 + 18));
      const innerY = y + innerRadius * Math.sin((Math.PI / 180) * (i * 72 + 18));
      
      if (i === 0) {
        this.ctx.moveTo(outerX, outerY);
      } else {
        this.ctx.lineTo(outerX, outerY);
      }
      this.ctx.lineTo(innerX, innerY);
    }
    this.ctx.closePath();
    this.ctx.fill();
    this.ctx.restore();
  }
  
  drawPartialStar(x, y, radius, ratio, activeColor, inactiveColor) {
    // 绘制底层完整星（灰色）
    this.drawStar(x, y, radius, inactiveColor);
    
    // 创建裁剪区域只显示部分星
    this.ctx.save();
    this.ctx.beginPath();
    this.ctx.rect(x - radius, y - radius, radius * 2 * ratio, radius * 2);
    this.ctx.clip();
    
    // 在上层绘制完整星（金色）
    this.drawStar(x, y, radius, activeColor);
    this.ctx.restore();
  }
  
  initEvents() {
    this.canvas.addEventListener('mousemove', (e) => {
      if (this.config.editable) {
        const rect = this.canvas.getBoundingClientRect();
        const mouseX = e.clientX - rect.left;
        const starIndex = Math.floor(mouseX / (this.config.size + this.config.spacing));
        const positionInStar = (mouseX - starIndex * (this.config.size + this.config.spacing)) / this.config.size;
        const newValue = Math.min(this.config.count, Math.max(0, 
          positionInStar > 0.5 ? starIndex + 1 : starIndex + positionInStar
        ));
        
        if (newValue !== this.config.value) {
          this.config.value = newValue;
          this.render();
        }
      }
    });
    
    this.canvas.addEventListener('click', () => {
      if (this.config.editable) {
        this.container.dispatchEvent(new CustomEvent('rating-change', {
          detail: this.config.value
        }));
      }
    });
  }
  
  setValue(value) {
    this.config.value = Math.min(this.config.count, Math.max(0, value));
    this.render();
  }
}

// 使用示例
const ratingContainer = document.getElementById('rating');
const starRating = new StarRating(ratingContainer, {
  value: 3.5,
  size: 40,
  spacing: 8
});

ratingContainer.addEventListener('rating-change', (e) => {
  console.log('New rating:', e.detail);
});

5.2 节日主题动画效果

结合Canvas动画API，可以创建各种节日主题的五角星特效：

javascript复制class StarAnimation {
  constructor(canvas) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.stars = [];
    this.resize();
    window.addEventListener('resize', this.resize.bind(this));
    this.initStars(50);
    this.animate();
  }
  
  resize() {
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
  }
  
  initStars(count) {
    for (let i = 0; i < count; i++) {
      this.stars.push({
        x: Math.random() * this.canvas.width,
        y: Math.random() * this.canvas.height,
        size: 5 + Math.random() * 10,
        speed: 0.5 + Math.random() * 2,
        rotation: Math.random() * 360,
        rotationSpeed: (Math.random() - 0.5) * 2,
        innerRatio: 0.3 + Math.random() * 0.2,
        color: `hsl(${Math.random() * 60 + 10}, 100%, 50%)`
      });
    }
  }
  
  drawStar(star) {
    this.ctx.save();
    this.ctx.translate(star.x, star.y);
    this.ctx.rotate((Math.PI / 180) * star.rotation);
    
    this.ctx.beginPath();
    for (let i = 0; i < 5; i++) {
      const outerX = star.size * Math.cos((Math.PI / 180) * (i * 72 - 18));
      const outerY = star.size * Math.sin((Math.PI / 180) * (i * 72 - 18));
      const innerSize = star.size * star.innerRatio;
      const innerX = innerSize * Math.cos((Math.PI / 180) * (i * 72 + 18));
      const innerY = innerSize * Math.sin((Math.PI / 180) * (i * 72 + 18));
      
      if (i === 0) {
        this.ctx.moveTo(outerX, outerY);
      } else {
        this.ctx.lineTo(outerX, outerY);
      }
      this.ctx.lineTo(innerX, innerY);
    }
    
    this.ctx.closePath();
    this.ctx.fillStyle = star.color;
    this.ctx.fill();
    this.ctx.restore();
  }
  
  updateStars() {
    for (const star of this.stars) {
      star.y += star.speed;
      star.rotation += star.rotationSpeed;
      
      if (star.y > this.canvas.height + star.size * 2) {
        star.y = -star.size * 2;
        star.x = Math.random() * this.canvas.width;
      }
    }
  }
  
  animate() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    
    // 绘制渐变背景
    const gradient = this.ctx.createLinearGradient(0, 0, 0, this.canvas.height);
    gradient.addColorStop(0, '#001a33');
    gradient.addColorStop(1, '#000011');
    this.ctx.fillStyle = gradient;
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    
    this.updateStars();
    for (const star of this.stars) {
      this.drawStar(star);
    }
    
    requestAnimationFrame(this.animate.bind(this));
  }
}

// 使用示例
const animationCanvas = document.getElementById('animationCanvas');
new StarAnimation(animationCanvas);

5.3 数据可视化中的五角星应用

在数据可视化中，五角星可以作为特殊的标记符号使用。以下是结合D3.js和Canvas的示例：

javascript复制function createStarVisualization(data) {
  const width = 800;
  const height = 500;
  const margin = { top: 20, right: 20, bottom: 40, left: 40 };
  
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  document.getElementById('visualization').appendChild(canvas);
  const ctx = canvas.getContext('2d');
  
  // 创建比例尺
  const xScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.x)])
    .range([margin.left, width - margin.right]);
  
  const yScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.y)])
    .range([height - margin.bottom, margin.top]);
  
  const sizeScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.size)])
    .range([5, 20]);
  
  const colorScale = d3.scaleSequential(d3.interpolateRainbow)
    .domain([0, data.length]);
  
  // 绘制坐标轴
  ctx.strokeStyle = '#666';
  ctx.lineWidth = 1;
  
  // X轴
  ctx.beginPath();
  ctx.moveTo(margin.left, height - margin.bottom);
  ctx.lineTo(width - margin.right, height - margin.bottom);
  ctx.stroke();
  
  // Y轴
  ctx.beginPath();
  ctx.moveTo(margin.left, height - margin.bottom);
  ctx.lineTo(margin.left, margin.top);
  ctx.stroke();
  
  // 绘制刻度
  ctx.textAlign = 'center';
  ctx.textBaseline = 'top';
  ctx.fillStyle = '#666';
  ctx.font = '10px Arial';
  
  const xTicks = xScale.ticks(5);
  xTicks.forEach(tick => {
    const x = xScale(tick);
    ctx.beginPath();
    ctx.moveTo(x, height - margin.bottom);
    ctx.lineTo(x, height - margin.bottom + 5);
    ctx.stroke();
    ctx.fillText(tick, x, height - margin.bottom + 8);
  });
  
  ctx.textAlign = 'right';
  ctx.textBaseline = 'middle';
  
  const yTicks = yScale.ticks(5);
  yTicks.forEach(tick => {
    const y = yScale(tick);
    ctx.beginPath();
    ctx.moveTo(margin.left - 5, y);
    ctx.lineTo(margin.left, y);
    ctx.stroke();
    ctx.fillText(tick, margin.left - 8, y);
  });
  
  // 绘制数据点（五角星）
  data.forEach((d, i) => {
    const x = xScale(d.x);
    const y = yScale(d.y);
    const size = sizeScale(d.size);
    const color = colorScale(i);
    
    ctx.save();
    ctx.translate(x, y);
    
    ctx.beginPath();
    for (let j = 0; j < 5; j++) {
      const outerX = size * Math.cos((Math.PI / 180) * (j * 72 - 18));
      const outerY = size * Math.sin((Math.PI / 180) * (j * 72 - 18));
      const innerSize = size * 0.382;
      const innerX = innerSize * Math.cos((Math.PI / 180) * (j * 72 + 18));
      const innerY = innerSize * Math.sin((Math.PI / 180) * (j * 72 + 18));
      
      if (j === 0) {
        ctx.moveTo(outerX, outerY);
      } else {
        ctx.lineTo(outerX, outerY);
      }
      ctx.lineTo(innerX, innerY);
    }
    
    ctx.closePath();
    ctx.fillStyle = color;
    ctx.fill();
    
    if (d.highlight) {
      ctx.strokeStyle = '#fff';
      ctx.lineWidth = 2;
      ctx.stroke();
    }
    
    ctx.restore();
  });
  
  // 添加图例
  ctx.textAlign = 'left';
  ctx.textBaseline = 'middle';
  ctx.font = '12px Arial';
  
  const legendItems = [
    { color: colorScale(0), label: '低值' },
    { color: colorScale(data.length / 2), label: '中值' },
    { color: colorScale(data.length - 1), label: '高值' }
  ];
  
  legendItems.forEach((item, i) => {
    const legendX = width - margin.right - 100;
    const legendY = margin.top + i * 25;
    
    ctx.fillStyle = item.color;
    ctx.beginPath();
    for (let j = 0; j < 5; j++) {
      const outerX = legendX + 10 * Math.cos((Math.PI / 180) * (j * 72 - 18));
      const outerY = legendY + 10 * Math.sin((Math.PI / 180) * (j * 72 - 18));
      const innerSize = 10 * 0.382;
      const innerX = legendX + innerSize * Math.cos((Math.PI / 180) * (j * 72 + 18));
      const innerY = legendY + innerSize * Math.sin((Math.PI / 180) * (j * 72 + 18));
      
      if (j === 0) {
        ctx.moveTo(outerX, outerY);
      } else {
        ctx.lineTo(outerX, outerY);
      }
      ctx.lineTo(innerX, innerY);
    }
    ctx.closePath();
    ctx.fill();
    
    ctx.fillStyle = '#000';
    ctx.fillText(item.label, legendX + 25, legendY);
  });
}

// 使用示例
const sampleData = Array.from({ length: 30 }, (_, i) => ({
  x: Math.random() * 100,
  y: Math.random() * 100,
  size: Math.random() * 10 + 2,
  highlight: Math.random() > 0.8
}));

createStarVisualization(sampleData);