在画布上突出显示坐标椭圆边界

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)); 
} 

现在，为了让那些边缘点，所有你需要做的是有一个类似的功能（或修改以前）做相同的，但用较少的粒度步骤以及返回计算的点 - count是您想要的点数。在这个例子中会返回点这里所得到的阵列排列为[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

结果：