Skip to content

Instantly share code, notes, and snippets.

@LQ1234

LQ1234/Bentline.js

Created November 24, 2017 19:13
Show Gist options
  • Save LQ1234/d155f5ab92bbc67dfc8935f501d991c5 to your computer and use it in GitHub Desktop.
Save LQ1234/d155f5ab92bbc67dfc8935f501d991c5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Bentline.js
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//ctx.moveTo(0,0);
//ctx.lineTo(200,100);
bentLine(0,50,60,70,43);//30
//bentLine(0,0,-1,0,1000);//30
function bentLine(x1,y1,x2,y2,al){
var tribase=dist(x1,y1,x2,y2)/2;
var trihypo=al;
var triheight=Math.sqrt(trihypo*trihypo-tribase*tribase);
var angleOfLine=((.5*Math.PI)-Math.atan2(y1-y2,x1-x2))+(.5*Math.PI);
var centerx=(x1+x2)/2
var centery=(y1+y2)/2
var dotx=centerx+Math.sin(angleOfLine)*triheight;
var doty=centery+Math.cos(angleOfLine)*triheight;
var check=(dist(x1,y1,dotx,doty)+dist(x2,y2,dotx,doty))/2;
console.log(check);
ctx.strokeStyle="#FF0000";
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
ctx.strokeStyle="#0088FF";
ctx.beginPath();
ctx.moveTo(centerx,centery);
ctx.lineTo(dotx,doty);
ctx.stroke();
//alert(angleOfLine);
}
function dist(x1,y1,x2,y2){
return(Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)));
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment