Comment dessiner Angle entre deux lignes en javascript

J’ai quatre divs qui est p1, p2, p3, p4. c’est glissable. à tout moment, je clique sur le bouton “draw”

entrez la description de l'image ici

$(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(); } }); 

Comment puis-je faire cela s’il vous plaît fournir une solution simple.

le violon: http://jsfiddle.net/b954W/

entrez la description de l'image ici

entrez la description de l'image ici

Je veux dessiner l’arc à l’intérieur de la forme à tout moment.

Voici comment illustrer l’angle entre les segments

Démo: http://jsfiddle.net/m1erickson/XnL3B/

entrez la description de l'image ici

Étape 1: Calculez les angles

Vous pouvez calculer l’angle entre 2 lignes connectées à un sumt à l’aide de Math.atan2:

 // 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); 

Étape 2: Dessinez le coin de l’angle

Vous pouvez dessiner le coin illustrant l’angle à l’aide de 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(); 

Étape n ° 3: Dessinez l’angle en degrés dans le texte

Et vous pouvez dessiner le texte de l’angle (converti en degrés) en utilisant 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);