两点之间的圆弧：在顶部设置角度“0”答案

【问题标题】：Arc between two points: set angle "0" on top两点之间的圆弧：在顶部设置角度“0”
【发布时间】：2017-06-15 08:47:59
【问题描述】：

我用 Javascript 编写了一个绘制弧线的函数。它基于 Bresenham 圆算法，在绘制点时，我检查它们是否在初始角度和最终角度之间。

它工作正常，但角度“0”位于圆的“最左侧”侧，而我希望它位于顶部，同时仍按顺时针方向计算角度。这该怎么做？谢谢

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');


function pset(x, y) {
  ctx.fillRect(x, y, 1, 1);
}

function arc (x, y, rd, a1 = 0, a2 = 360) {
    let xx = rd;
    let yy = 0;
    let radiusError = 1 - xx;

    function inAngle(x1, y1) {
        const deltaY = y1 - y;
        const deltaX = x1 - x;
        const angleInDegrees = (Math.atan2(deltaY, deltaX) * 180 / Math.PI) + 180;

        return angleInDegrees >= a1 && angleInDegrees <= a2;
    }

    while (xx >= yy) {
        if (inAngle( xx + x,  yy + y)) pset( xx + x,  yy + y);
        if (inAngle( yy + x,  xx + y)) pset( yy + x,  xx + y);
        if (inAngle(-xx + x,  yy + y)) pset(-xx + x,  yy + y);
        if (inAngle(-yy + x,  xx + y)) pset(-yy + x,  xx + y);
        if (inAngle(-xx + x, -yy + y)) pset(-xx + x, -yy + y);
        if (inAngle(-yy + x, -xx + y)) pset(-yy + x, -xx + y);
        if (inAngle( xx + x, -yy + y)) pset( xx + x, -yy + y);
        if (inAngle( yy + x, -xx + y)) pset( yy + x, -xx + y);

        yy++;

        if (radiusError < 0) {
            radiusError += 2 * yy + 1;
        }
        else {
            xx--;
            radiusError+= 2 * (yy - xx + 1);
        }
    }
}

arc(50, 50, 20, 0, 45);
arc(50, 70, 20, 0, 90);
arc(50, 90, 20, 0, 180);

&lt;canvas width="128" height="128" id="canvas"/&gt;

【问题讨论】：

标签： javascript canvas geometry trigonometry

【解决方案1】：

只需在arc 函数的开头添加以下两行：

a1 += 90;
a2 += 90;

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');


function pset(x, y) {
  ctx.fillRect(x, y, 1, 1);
}

function arc (x, y, rd, a1 = 0, a2 = 360) {
    a1 += 90; // add this line
    a2 += 90; // add this line
    let xx = rd;
    let yy = 0;
    let radiusError = 1 - xx;

    function inAngle(x1, y1) {
        const deltaY = y1 - y;
        const deltaX = x1 - x;
        const angleInDegrees = (Math.atan2(deltaY, deltaX) * 180 / Math.PI) + 180;

        return angleInDegrees >= a1 && angleInDegrees <= a2;
    }

    while (xx >= yy) {
        if (inAngle( xx + x,  yy + y)) pset( xx + x,  yy + y);
        if (inAngle( yy + x,  xx + y)) pset( yy + x,  xx + y);
        if (inAngle(-xx + x,  yy + y)) pset(-xx + x,  yy + y);
        if (inAngle(-yy + x,  xx + y)) pset(-yy + x,  xx + y);
        if (inAngle(-xx + x, -yy + y)) pset(-xx + x, -yy + y);
        if (inAngle(-yy + x, -xx + y)) pset(-yy + x, -xx + y);
        if (inAngle( xx + x, -yy + y)) pset( xx + x, -yy + y);
        if (inAngle( yy + x, -xx + y)) pset( yy + x, -xx + y);

        yy++;

        if (radiusError < 0) {
            radiusError += 2 * yy + 1;
        }
        else {
            xx--;
            radiusError+= 2 * (yy - xx + 1);
        }
    }
}

arc(50, 50, 20, 0, 45);
arc(50, 70, 20, 0, 90);
arc(50, 90, 20, 0, 180);

&lt;canvas width="128" height="128" id="canvas"/&gt;

【讨论】：