代码之家  ›  专栏  ›  技术社区  ›  Chewie The Chorkie

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

  •  0
  • Chewie The Chorkie  · 技术社区  · 5 年前

    I found a helpful function to draw an ellipse 任何宽度和高度。有没有一种方法可以通过发送俯仰、偏航和横摇值使其看起来在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();
    }
    
    0 回复  |  直到 5 年前
    推荐文章