Question

我想在画布上绘制椭圆的高度。下面是我在画布上绘制椭圆的代码。

      function drawOval(startX, startY, endX, endY, strokeColor) {
    x = endX;
    y = endY;
    context.beginPath();
    context.strokeStyle = strokeColor;
    context.moveTo(startX, startY + (y - startY) / 2);
    context.bezierCurveTo(startX, startY, x, startY, x, startY + (y - startY) / 2);
    context.bezierCurveTo(x, y, startX, y, startX, startY + (y - startY) / 2);
    context.stroke();
    context.fillStyle = strokeColor;
    context.fill();

}

Answer 1

我建议以不同的方式画椭圆形：

Bezier更复杂，性能更苛刻
Bezier不绘制精确的椭圆（椭圆）
在不使用手动公式的情况下，更难以提取某些测量点。

使用与您所拥有的签名兼容的其他方法：

function drawOval(startX, startY, endX, endY, strokeColor) {

    var rx = (endX - startX) * 0.5,  // get radius for x 
        ry = (endY - startY) * 0.5,  // get radius for y
        cx = startX + rx,            // get center position for ellipse
        cy = startY + ry,
        a = 0,                       // current angle
        step = 0.01,                 // angle step
        pi2 = Math.PI * 2;

    context.beginPath();
    context.strokeStyle = strokeColor;
    context.moveTo(cx + rx, cy);     // initial point at 0 deg.

    for(; a < pi2; a += step)
        context.lineTo(cx + rx * Math.cos(a), // create ellipse path
                       cy + ry * Math.sin(a));

    context.closePath();             // close for stroke

    context.stroke();
    context.fillStyle = strokeColor;
    context.fill();
}

<强> Live demo here

现在只需执行以下操作即可获得高度（和宽度）：

var width = Math.abs(endX - startX),
    height = Math.abs(endY - startY);

获得画布上绘制的椭圆形高度

1 个答案: