突出显示Canvas椭圆边界上​​的坐标

Question

我使用画布的bezierCurveTo方法绘制椭圆。我必须突出椭圆边界上​​的点（与powerpoint中的椭圆形相同）。我想要所有八个坐标的确切位置将它们放在画布上。请参阅随附的屏幕截图

Answer 1

我建议不要使用Bezier来创建一个椭圆/椭圆 - 它的数学不准确，当你想使用像这样的点时会引起头痛。

我建议创建自己的椭圆函数 - 它很简单;这会创建一个椭圆作为您可以填充和描边等的路径：

function drawEllipse(cxt, cx, cy, rx, ry) {
    ctx.beginPath();
    ctx.moveTo(cx + rx, cy);
    for(var a = 0, step = 0.02, max = Math.PI * 2; a < max; a += step)
        ctx.lineTo(cx + rx * Math.cos(a), cy+ ry * Math.sin(a));
}

现在，要获得这些边缘点，您需要做的就是使用类似的功能（或修改之前的功能），但执行相同的操作，但步骤更少，并返回计算的点数 - 计数是您想要的点数。此示例中的结果数组将返回点排列为[x1, y1, x2, y2, ...] - 这是您可以根据需要调整的内容：

function getEllipsePoints(cxt, cx, cy, rx, ry, count) {

    var points = [],
        a = 0, max = Math.PI * 2,
        step = max / count

    for(; a < max; a += step)
        points.push(cx + rx * Math.cos(a), cy+ ry * Math.sin(a));

    return points;
}

现在您可以根据需要绘制边缘处的点（并且具有数学上正确的椭圆以及鼠标的生命点）。

<强> Live demo here

结果：