NoTimeForHero · September 10, 2012 09:10
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html>
 <head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <script>
 var xColor = "black";

 $(document).ready(function() {
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");

 $("#justDoIt").bind("click",function(){


 // вводим угол и радиус
 var Radius = parseInt($("#radius").val());
 var Angle = (parseInt($("#angle").val()) * Math.PI/180); // угол в градусах
 // вводим пары значений
 var x1 = parseInt($("#x1").val()); var x2 = parseInt($("#x2").val());
 var y1 = parseInt($("#y1").val()); var y2 = parseInt($("#y2").val());



 xColor = "black";
 // основовнаая стрелка
 var rad = drawLine(ctx,x1,y1,x2,y2);

 // перва боковая стрелка
 xColor = "green";
 var x3 = x2 + Radius * Math.sin(rad + Angle);
 var y3 = y2 + Radius * Math.cos(rad + Angle);
 drawLine(ctx,x2,y2,x3,y3);

 // вторая боковая стрелка
 xColor = "green";
 var x3 = x2 + Radius * Math.sin(rad - Angle);
 var y3 = y2 + Radius * Math.cos(rad - Angle);
 drawLine(ctx,x2,y2,x3,y3);


 });


 function drawLine(ctx,x1,y1,x2,y2) {
 ctx.beginPath();
 ctx.moveTo(x1,y1);
 ctx.lineTo(x2,y2);
 ctx.strokeStyle = xColor;
 ctx.stroke();

 var rad = findRad(x1,y1,x2,y2);
 return rad;
 }


 function findRad(x1,y1,x2,y2) {
 	return hard_findRad(x1,y1,x2,y2);
 }

 function hard_findRad(x1,y1,x2,y2) {
 	var x = x1 - x2;
 	var y = y1 - y2;
 	var fi = 0;

 	if ( (x > 0) && (y >= 0) ) {
 		fi = Math.atan(x/y);
 	}

 	if ( (x > 0) && (y < 0) ) {
 		fi = Math.atan(x/y) + 2 * Math.PI;
 	}

 	if ( (x < 0) ) {
 		fi = Math.atan(x/y) + Math.PI;
 	}

 	if ( (x == 0) && (y > 0) ) {
 		fi = Math.PI / 2;
 	}

 	if ( (x == 0) && (y < 0) ) {
 		fi = 3 * Math.PI / 2;
 	}

 	if ( (x == 0) && (y == 0) ) {
 		fi = 0;
 	}

 	console.log('hard',x,y,fi);
 	easy_findRad(x1,y1,x2,y2);
 	return fi;
 }

 function easy_findRad(x1,y1,x2,y2) { var fi = Math.atan2(x1-x2,y1-y2); console.log('easy',x1-x2,y1-y2,fi); return fi; }
 //
 function fail_findRad(x1,y1,x2,y2) {
 // скалярное произведение векторов
 var sqrt1 = Math.sqrt(Math.pow(x1,2) + Math.pow(y1,2));
 var sqrt2 = Math.sqrt(Math.pow(x2,2) + Math.pow(y2,2));
 var result = (x1*x2 + y1*y2) / ( sqrt1 * sqrt2);
 //console.log(result,x1,x2,y1,y2);
 return result;
 }

 });
 </script>

 </head>
 <body>

 <canvas width="300" height="400" id="myCanvas">
 </canvas>

 <br/>

 Радиус:
 <input type="text" id="radius" value="15">

 <br/>

 Угол (в градусах):
 <input type="text" id="angle" value="30">

 <br/>

 X,Y 1:
 <input type="text" id="x1" value="10">
 <input type="text" id="y1" value="10">

 <br/>

 X,Y 2:
 <input type="text" id="x2" value="200">
 <input type="text" id="y2" value="90">

 <br/>

 <input type="button" id="justDoIt" value="Стрелка">


 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
	var xColor = "black";

	$(document).ready(function() {
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");

	$("#justDoIt").bind("click",function(){


	// вводим угол и радиус
	var Radius = parseInt($("#radius").val());
	var Angle = (parseInt($("#angle").val()) * Math.PI/180); // угол в градусах
	// вводим пары значений
	var x1 = parseInt($("#x1").val()); var x2 = parseInt($("#x2").val());
	var y1 = parseInt($("#y1").val()); var y2 = parseInt($("#y2").val());



	xColor = "black";
	// основовнаая стрелка
	var rad = drawLine(ctx,x1,y1,x2,y2);

	// перва боковая стрелка
	xColor = "green";
	var x3 = x2 + Radius * Math.sin(rad + Angle);
	var y3 = y2 + Radius * Math.cos(rad + Angle);
	drawLine(ctx,x2,y2,x3,y3);

	// вторая боковая стрелка
	xColor = "green";
	var x3 = x2 + Radius * Math.sin(rad - Angle);
	var y3 = y2 + Radius * Math.cos(rad - Angle);
	drawLine(ctx,x2,y2,x3,y3);


	});


	function drawLine(ctx,x1,y1,x2,y2) {
	ctx.beginPath();
	ctx.moveTo(x1,y1);
	ctx.lineTo(x2,y2);
	ctx.strokeStyle = xColor;
	ctx.stroke();

	var rad = findRad(x1,y1,x2,y2);
	return rad;
	}


	function findRad(x1,y1,x2,y2) {
	return hard_findRad(x1,y1,x2,y2);
	}

	function hard_findRad(x1,y1,x2,y2) {
	var x = x1 - x2;
	var y = y1 - y2;
	var fi = 0;

	if ( (x > 0) && (y >= 0) ) {
	fi = Math.atan(x/y);
	}

	if ( (x > 0) && (y < 0) ) {
	fi = Math.atan(x/y) + 2 * Math.PI;
	}

	if ( (x < 0) ) {
	fi = Math.atan(x/y) + Math.PI;
	}

	if ( (x == 0) && (y > 0) ) {
	fi = Math.PI / 2;
	}

	if ( (x == 0) && (y < 0) ) {
	fi = 3 * Math.PI / 2;
	}

	if ( (x == 0) && (y == 0) ) {
	fi = 0;
	}

	console.log('hard',x,y,fi);
	easy_findRad(x1,y1,x2,y2);
	return fi;
	}

	function easy_findRad(x1,y1,x2,y2) { var fi = Math.atan2(x1-x2,y1-y2); console.log('easy',x1-x2,y1-y2,fi); return fi; }
	//
	function fail_findRad(x1,y1,x2,y2) {
	// скалярное произведение векторов
	var sqrt1 = Math.sqrt(Math.pow(x1,2) + Math.pow(y1,2));
	var sqrt2 = Math.sqrt(Math.pow(x2,2) + Math.pow(y2,2));
	var result = (x1x2 + y1y2) / ( sqrt1 * sqrt2);
	//console.log(result,x1,x2,y1,y2);
	return result;
	}

	});
	</script>

	</head>
	<body>

	<canvas width="300" height="400" id="myCanvas">
	</canvas>

	<br/>

	Радиус:
	<input type="text" id="radius" value="15">

	<br/>

	Угол (в градусах):
	<input type="text" id="angle" value="30">

	<br/>

	X,Y 1:
	<input type="text" id="x1" value="10">
	<input type="text" id="y1" value="10">

	<br/>

	X,Y 2:
	<input type="text" id="x2" value="200">
	<input type="text" id="y2" value="90">

	<br/>

	<input type="button" id="justDoIt" value="Стрелка">


	</body>
	</html>