用canvas绘制六芒星 已知六芒星其中两个顶点，（100,200）、（500,200），采用直接绘制

要在HTML5 Canvas上绘制一个六芒星，我们需要知道六芒星的基本构造规则，它是由六个等边三角形组成的。通常，我们会使用贝塞尔曲线（Bezier Curves）来绘制这种形状。给定两个顶点作为基准，我们可以先计算出其他的点，然后连接它们形成六芒星。

这里是一个基本步骤的示例：

1. **确定中心点**：因为两个顶点都是在y轴上，所以可以假设中心点在x轴中间，即（(100 + 500) / 2, 200），即（300, 200）。

2. **绘制三条对称的边**：从中心点到每个顶点，这将是第一个三角形的三边。画线段（300, 200）->（100, 200）, （300, 200）->（500, 200）。

3. **绘制三个内部三角形**：对于每个外部三角形，找到其内部顶点。例如，第一个三角形的内部顶点是通过中心点向两边各偏移距离的一半（约为479.78和420.22）。依次连接这三个内部顶点，以及对应的外边点。

4. **绘制其他两组三角形**：类似地，找出第二组和第三组三角形的顶点，并连接起来。

由于Canvas API是基于JavaScript的，下面是一个简单的JavaScript函数示例，展示了如何绘制这个六芒星：

function drawHexagram(canvas, centerX, centerY, sideLength) {
    const ctx = canvas.getContext('2d');

    // 边长
    const halfSide = sideLength / 2;

    // 顶点
    const vertices = [
        [centerX - halfSide, centerY],
        [centerX + halfSide, centerY],
        [centerX, centerY - sideLength],
        [centerX, centerY + sideLength],

        // 内部顶点
        [centerX - halfSide * Math.sqrt(3), centerY + halfSide],
        [centerX + halfSide * Math.sqrt(3), centerY - halfSide]
    ];

    // 绘制边
    for (let i = 0; i < 6; i++) {
        ctx.beginPath();
        ctx.moveTo(vertices[i][0], vertices[i][1]);
        ctx.lineTo(vertices[(i + 1) % 6][0], vertices[(i + 1) % 6][1]);
        ctx.stroke();
    }
}

// 使用示例
const canvas = document.getElementById('myCanvas');
drawHexagram(canvas, 300, 200, 400);

请注意，你需要在一个实际的HTML环境中设置好canvas元素，并确保已经处理了浏览器兼容性问题。