在畫布上突出顯示座標橢圓邊界

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

結果：