js圆形公式

html:

<h1>The Unit Circle Visualized</h1>
<canvas id="oy" width="460" height="410"></canvas>
<div>&theta; = <span id="theta">45</span>&deg;</div>
<div>&theta; = <span id="thetaRad">0</span>&pi; rad</div>
<div id="cos">cos(&theta;) = <span id="costheta"></span>&nbsp;</div>
<div id="sin">sin(&theta;) = <span id="sintheta"></span>&nbsp;</div>

js:

function draw() {
    var canvas = document.getElementById('oy');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        var rect = canvas.getBoundingClientRect();
        var quadrant;
        var theta;
        var thetaDeg;
        var cosT;
        var sinT;
        var circlex;
        var circley;
        var mx;
        var my;
        var radius = 200;
        var startAngle = 0;
        var endAngle = 2 * (Math.PI);
        $(document).on('mousemove', function(e) {
            ctx.clearRect(0, 0, (2 * radius) + 150, (2 * radius) + 150);
            ctx.beginPath();
            ctx.strokeStyle = "000000";
            ctx.arc(radius, radius, radius, startAngle, endAngle);
            ctx.moveTo(radius, 0);
            ctx.lineTo(radius, 2 * radius);
            ctx.moveTo(0, radius);
            ctx.lineTo(radius * 2, radius);
            ctx.stroke();
            ctx.closePath();
            mx = e.clientX - rect.left;
            my = e.clientY - rect.top;
            var convertedx = mouseToPoint("x", radius, mx);
            var convertedy = mouseToPoint("y", radius, my);
            theta = findTheta(convertedx, convertedy);
            thetaDeg = toDeg(theta, convertedx, convertedy);
            cosT = Math.round(circlex / radius * 1000) / 1000;
            sinT = Math.round(circley / radius * 1000) / 1000;
            $("#theta").html(Math.round(thetaDeg));
            $("#costheta").html(cosT);
            $("#sintheta").html(sinT);
            $("#thetaRad").html(Math.floor(1 / 180 * thetaDeg * 1000) / 1000);
            circlex = findPoints(theta, radius, "x", convertedx);
            circley = findPoints(theta, radius, "y", convertedx);
            var circleMousex = pointToMouse("x", radius, circlex);
            var circleMousey = pointToMouse("y", radius, circley);
            ctx.beginPath();
            ctx.moveTo(radius, radius);
            ctx.lineTo(circleMousex, circleMousey);
            ctx.stroke();
            ctx.closePath();
            ctx.beginPath();
            ctx.strokeStyle = "blue";
            ctx.moveTo(circleMousex, circleMousey);
            ctx.lineTo(circleMousex, radius);
            ctx.stroke();
            ctx.closePath();
            ctx.beginPath();
            ctx.strokeStyle = "red";
            ctx.moveTo(circleMousex, radius);
            ctx.lineTo(radius, radius);
            ctx.font = "18pt Open Sans Condensed";
            ctx.textBaseline = "bottom";
            ctx.fillStyle = 'blue';
            ctx.textAlign = "start";
            ctx.fillText(sinT, circleMousex, circley / 2 + radius - circley);
            ctx.stroke();
            ctx.closePath();
            ctx.beginPath();
            ctx.textAlign = "center";
            ctx.fillStyle = 'red';
            ctx.fillText(cosT, circlex / 2 + radius, radius);
            ctx.stroke();
            ctx.closePath();
            ctx.beginPath();
            ctx.strokeStyle = "gray";
            ctx.arc(radius, radius, 30, startAngle, 2 * Math.PI - Math.PI / 180 * thetaDeg, true);
            ctx.stroke();
            ctx.closePath();
        });
    }
}

function findPoints(theta, radius, axis, convertedx) {
    var p;
    if (axis == "x") {
        p = radius * Math.cos(theta);
        //H*cosƟ = A
    }
    if (axis == "y") {
        p = radius * Math.sin(theta);
        //H*sinƟ = O;
    }
    if (convertedx < 0) {
        p = p * -1;
    }
    return p;
}

function findTheta(convertedmx, convertedmy) {
    //assumes origin is at 0,0
    var t = Math.atan(convertedmy / convertedmx);
    //Ɵ = tan^-1(O/A)
    return t;
}

function mouseToPoint(axis, radius, point) {
    var converted;
    //radius = max height and width of graph
    if (axis == "x") {
        converted = point - radius;
    }
    if (axis == "y") {
        converted = radius - point;
    }
    return converted;
}

function pointToMouse(axis, radius, point) {
    var converted;
    if (axis == "x") {
        converted = point + radius;
    }
    if (axis == "y") {
        converted = -point + radius;
        //who knows why this works
    }
    return converted;
}

function toDeg(theta, convertedmx, convertedmy) {
    theta = theta * 180 / Math.PI;
    if (convertedmy < 0) {
        if (convertedmx < 0) {
            theta += 180;
        } else {
            theta += 360;
        }
    } else {
        if (convertedmx < 0) {
            theta += 180;
        }
    }
    return theta;
}

draw();

css:

canvas {
    margin: auto;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
    left: 30px;
}
div {
    font-family: "Open Sans Condensed";
    font-size: 18pt;
    font-weight: 100;
    text-align: center;
    padding-top: 20px;
}
td {
    width: 200px;
    text-align: center;
    font-family: "Open Sans Condensed";
    font-size: 18pt;
    font-weight: 100;
    text-align: center;
}
table {
    margin: auto;
}
#costheta {
    color: red;
}
#sintheta {
    color: blue;
}
h1 {
    font-family: "Open Sans Condensed";
    fonte-weight: 100;
    font-size: 36pt;
    text-align: center;
}