0

基本上我有一个椭圆形，但这个椭圆形由 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>
4

2 回答 2

0

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

现场演示

椭圆快照

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这将使其更快（它也可以基于圆周动态）。

于 2013-10-22T07:28:49.693 回答
0

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

在此处输入图像描述

如果是这样，试试这个代码和小提琴：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
    });
}
于 2013-10-21T21:28:31.100 回答