在JavaScript中使用俯仰、偏航和滚动在3轴上旋转椭圆

任何宽度和高度。有没有办法通过发送俯仰、偏航和滚动值使其在3D中显示为旋转的

function drawEllipse(ctx, x, y, w, h, pitch, yaw, roll, strokeColor) {
    var kappa = .5522848,
        ox = (w / 2) * kappa, // control point offset horizontal
        oy = (h / 2) * kappa, // control point offset vertical
        xe = x + w,           // x-end
        ye = y + h,           // y-end
        xm = x + w / 2,       // x-middle
        ym = y + h / 2;       // y-middle

    ctx.beginPath();
    ctx.strokeStyle = strokeColor
    ctx.moveTo(x, ym);

    // draw 4 quarters of the elipse
    // top left, top right, bottom right, bottom left
    /*
    cp1x
    The x-axis coordinate of the first control point.
    cp1y
    The y-axis coordinate of the first control point.
    cp2x
    The x-axis coordinate of the second control point.
    cp2y
    The y-axis coordinate of the second control point.
    x
    The x-axis coordinate of the end point.
    y
    The y-axis coordinate of the end point.
    */
    ctx.bezierCurveTo(x,       ym - oy, xm - ox, y,       xm, y);  // quarter 1
    ctx.bezierCurveTo(xm + ox, y,       xe,      ym - oy, xe, ym); // quarter 2
    ctx.bezierCurveTo(xe,      ym + oy, xm + ox, ye,      xm, ye); // quarter 3
    ctx.bezierCurveTo(xm - ox, ye,      x,       ym + oy, x,  ym); // quarter 4

    ctx.stroke();
}

---

…当画布API作为标准函数可用时，为什么要使用贝塞尔曲线？话虽如此，你真的想画3D（例如webgl）还是想用投影来伪造它？我不知道有一个椭圆函数可用，谢谢你。椭圆似乎无法扭曲自身，以显示距离观察者更远或更近的一面。WebGL对于我想要实现的目标来说太重了，不必要。我想“伪造”它，是的。webgl没什么大不了的，对于像这样简单的东西，它很简单，网上有一百万个教程，基本上涵盖了这一点，行数和你文章的代码片段一样多。如果您想要投影，那么您可能想要的是使用

beginShape

、

vertex

和

endShape

来构建它，使用非常简单的公式来计算给定输入角度的椭圆上的点，而不是直接调用

ctx.vertex（x，y）

，调用

ctx.vertex（…project（x，y））

。虽然这将问题转移到实现投影上，但是已经有相当多的答案了。谢谢，也许我会用它来代替。我不知道它支持所有浏览器。