1

我开发了这个画布http://jsfiddle.net/user373721/dT8qM/

它工作得很好，除了我得到了错误的角度值。要尝试这个例子，请在画布上按下鼠标左键，拖动它来绘制第一行，然后松开左键，将光标移动到第二行结束的位置（如果用户能看到该行就好了正在绘制）然后再次按下鼠标按钮。角度值将显示；我正在使用以下方法来计算角度：

 angle = (Math.atan2(ay2 - ay1, ax2 - ax1)).toFixed(2);

非常感谢您的建议，在此先感谢。

4

1 回答 1

2

假设顺时针扫描，这是一个函数，可为您提供线 [x1,y1,x2,y2] 和 [x2,y2,x3,y3] 的度角。

    function degreeAngle(x1,y1,x2,y2,x3,y3){
        var theta1=Math.atan2( (y1-y2),(x1-x2) );
        var theta2=Math.atan2( (y3-y2),(x3-x2) );
        var theta=(theta2-theta1)*180/Math.PI;
        theta=(theta+360)%360;
        return(theta.toFixed(2));
    }

在此处输入图像描述

这是代码和小提琴：http: //jsfiddle.net/m1erickson/99BBm/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var x1=50;
    var y1=50;
    var x2=100;
    var y2=125;
    var x3=250;
    var y3=75;
    var angle=degreeAngle(x1,y1,x2,y2,x3,y3);

    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.lineTo(x3,y3);
    ctx.stroke();
    endingArrow(x2,y2,x3,y3);
    ctx.font="18px Verdana";
    ctx.fillText(angle+" degrees",40,200);

    function degreeAngle(x1,y1,x2,y2,x3,y3){
        var theta1=Math.atan2( (y1-y2),(x1-x2) );
        var theta2=Math.atan2( (y3-y2),(x3-x2) );
        var theta=(theta2-theta1)*180/Math.PI;
        theta=(theta+360)%360;
        return(theta.toFixed(2));
    }

    function endingArrow(x,y,xx,yy){
        var endRadians=Math.atan((yy-y)/(xx-x));
        endRadians+=((xx>x)?90:-90)*Math.PI/180;
        ctx.save();
        ctx.beginPath();
        ctx.translate(xx,yy);
        ctx.rotate(endRadians);
        ctx.moveTo(0,0);
        ctx.lineTo(8,20);
        ctx.lineTo(-8,20);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
于 2013-06-09T00:04:45.203 回答