Question

基本上我有一个椭圆形但这个椭圆形由4个弧组成。椭圆形具有2个相等的侧弧和相等的2个端弧。侧弧与端弧相切，反之亦然。如果您使用我的代码段，您会发现我的问题。

            <!DOCTYPE html>
            <html>
            <body>

            <canvas id="myCanvas" width="500" height="500" style="border:2px solid black;">
            Your browser does not support the HTML5 canvas tag.</canvas>

            <script>

                var c = document.getElementById("myCanvas");
                var ctx = c.getContext("2d");
                var scale = 5
                var xPos = 250
                var yPos = 250
                var SideRad = .56104321 * 96.0000000000011
                var EndRad = .1190 * 96.0000000000011
                var dim1 = .3640432 * 96.0000000000011
                var dim2 = .2560 * 96.0000000000011
                var a1 = 54.88460631
                var a2 = 125.11539369

                ctx.beginPath();

                ctx.arc(xPos, yPos + (dim1 * scale), SideRad * scale, (((360 - a2) * Math.PI) / 180), (((360 - a1) * Math.PI) / 180), false);

                ctx.arc(xPos + (dim2 * scale), yPos, EndRad * scale, (((360 - a1) * Math.PI) / 180), ((a1 * Math.PI) / 180), false);

                ctx.arc(xPos, yPos - (dim1 * scale), SideRad * scale, ((a1 * Math.PI) / 180), ((a2 * Math.PI) / 180), false);

                ctx.arc(xPos - (dim2 * scale), yPos, EndRad * scale, (((a2) * Math.PI) / 180), (((360 - a2) * Math.PI) / 180), false);

                ctx.strokeStyle = 'black';
                ctx.lineJoin = "round"
                ctx.stroke();

            </script> 

            </body>
            </html>

Answer 1

您的项目设计是否允许由2条贝塞尔曲线形成的替代椭圆？

enter image description here

如果是这样，请尝试使用此代码和小提琴：http://jsfiddle.net/m1erickson/UfXFK/

注意：这是椭圆的近似值，而不是数学上完美的椭圆。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var point = drawEllipse(20, 50, 100);

function drawEllipse(x, cy, width) {
    // x=left, cy=vertical center of ellipse
    // note: just an approximation of an ellipse
    var height = width * 0.40;
    ctx.beginPath();
    ctx.moveTo(x, cy);
    ctx.bezierCurveTo(
    x + width / 2 * .05, cy - height,
    x + width - width / 2 * .05, cy - height,
    x + width, cy);
    ctx.bezierCurveTo(
    x + width - width / 2 * .05, cy + height,
    x + width / 2 * .05, cy + height,
    x, cy);
    ctx.closePath();
    ctx.stroke();
    return ({
        x: x + width,
        y: cy
    });
}

Answer 2

如果您只想绘制椭圆，则根本不需要使用弧 - 这是使用简单三角法制作“完美”椭圆/椭圆的替代方法：

<强> LIVE DEMO

Ellipse snapshot

var rx = 180,         /// radius x
    ry = 100,         /// radius y
    e = 2 * Math.PI,  /// end angle
    res = 0.05;       /// step resolution

ctx.beginPath();

/// calculate first point
ctx.moveTo(xPos + rx * Math.cos(e), yPos + ry * Math.sin(e));

while(e > res) {
    e -= res;
    ctx.lineTo(xPos + rx * Math.cos(e), yPos + ry * Math.sin(e));
}

ctx.closePath();   /// join first and last point
ctx.stroke();

这种方法效果很快，您可以通过增加res来降低分辨率，这会使其更快（根据周长也可以是动态的）。

无法使用画布将弧线表示为切线

2 个答案: