如何在javascript中的两行之间绘制角度

Question

我有四个div，分别是p1，p2，p3，p4。它是拖延的。在任何一点上我点击＆＃34;画＆＃34;按钮我想画下面的角度符号

$(document).ready(function(){
    var c=document.getElementById('canvas');
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(parseInt($("#p1").css("left"))-5,parseInt($("#p1").css("top"))-5)
    ctx.lineTo(parseInt($("#p2").css("left"))-5,parseInt($("#p2").css("top"))-5)
    ctx.lineTo(parseInt($("#p3").css("left"))-5,parseInt($("#p3").css("top"))-5)
    ctx.lineTo(parseInt($("#p4").css("left"))-5,parseInt($("#p4").css("top"))-5)
    ctx.lineTo(parseInt($("#p1").css("left"))-5,parseInt($("#p1").css("top"))-5)
    ctx.fillStyle='#E6E0EC';
    ctx.fill();
    ctx.strokeStyle="#604A7B";
    ctx.lineWidth="3"
    ctx.stroke();
    ctx.closePath();
    $("#p1,#p2,#p3,#p4").draggable({
    drag:function(){
    ctx.clearRect(0,0,500,500);
    ctx.beginPath();
    ctx.moveTo(parseInt($("#p1").css("left"))-5,parseInt($("#p1").css("top"))-5)
    ctx.lineTo(parseInt($("#p2").css("left"))-5,parseInt($("#p2").css("top"))-5)
    ctx.lineTo(parseInt($("#p3").css("left"))-5,parseInt($("#p3").css("top"))-5)
    ctx.lineTo(parseInt($("#p4").css("left"))-5,parseInt($("#p4").css("top"))-5)
    ctx.lineTo(parseInt($("#p1").css("left"))-5,parseInt($("#p1").css("top"))-5)
    ctx.fillStyle='#E6E0EC';
    ctx.fill();
    ctx.strokeStyle="#604A7B";
    ctx.lineWidth="3"
    ctx.stroke();
    ctx.closePath();
                   }

    });

我怎样才能提供简单的解决方案。

小提琴：http://jsfiddle.net/b954W/

我想在任何一点绘制形状内的弧。

Answer 1

以下是如何说明线段之间的角度

演示：http://jsfiddle.net/m1erickson/XnL3B/

步骤1：计算角度

您可以使用Math.atan2计算在顶点连接的2条线之间的角度：

// calculate the angles in radians using Math.atan2

var dx1=pt1.x-pt2.x;
var dy1=pt1.y-pt2.y;
var dx2=pt3.x-pt2.x;
var dy2=pt3.y-pt2.y;
var a1=Math.atan2(dy1,dx1);
var a2=Math.atan2(dy2,dx2);

步骤2：绘制角度的楔形

您可以使用context.arc：

绘制说明角度的楔形

// draw angleSymbol using context.arc

ctx.save();
ctx.beginPath();
ctx.moveTo(pt2.x,pt2.y);
ctx.arc(pt2.x,pt2.y,20,a1,a2);
ctx.closePath();
ctx.fillStyle="red";
ctx.globalAlpha=0.25;
ctx.fill();
ctx.restore();

步骤3：在文本中绘制度数角度

您可以使用context.fillText：

绘制角度文本（转换为度数）

// draw the degree angle in text

var a=parseInt((a2-a1)*180/Math.PI+360)%360;
ctx.fillStyle="black";
ctx.fillText(a,pt2.x+15,pt2.y);