Untitled

<html>
<head>
<style>
body {
  background: #ffffff url("img_tree.png") no-repeat right top;
  margin-right: 200px;
}
</style>
<title>Курсова работа</title>
</head>
<body>
<form name="data_IN">
L:<input type="text" name="l" value=""> <br>
B:<input type="text" name="b" value=""> <br>
</form>
<button onclick="draw();">Draw</button>
<button onclick="clean();">Clean</button>
<br>
<canvas id="myCanvas" width="1300" height="475" style="border:1px solid #d3d3d3;">
Your browser doesn't support the HTML5 canvas tag. </canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var k =4.47;
function draw()
{
    var h=document.data_IN.l.value*-1;
    var p=document.data_IN.b.value*-1;
	ctx.clearRect(0,0, canvas.width, canvas.height);


    ctx.beginPath();
    ctx.moveTo((20+(2*p/2))*k,40*k);
    ctx.lineTo((20+(2*p/2))*k,66*k);    // 1 liniq

    ctx.moveTo((22+(p/2))*k,38*k);
    ctx.lineTo((22+(p/2))*k,68*k);  // 2 liniq

    ctx.moveTo((20+(2*p/2))*k,40*k);
    ctx.lineTo((22+(p/2))*k,38*k);  //45 ygyl

    ctx.moveTo((20+(2*p/2))*k,66*k);
    ctx.lineTo((22+(p/2))*k,68*k);   //45 ygyl

    ctx.moveTo((22+(p/2))*k,38*k);  //liniq chast ot B 34mm otgore
    ctx.lineTo((56+(p/2))*k,38*k);

    ctx.moveTo((22+(p/2))*k,68*k);
    ctx.lineTo((56+(p/2))*k,68*k);  //liniq chast ot B 34mm otdolu

    ctx.moveTo((56+(p/2))*k,35*k);
    ctx.lineTo((56+(p/2))*k,71*k);  //3 liniq

    ctx.moveTo((56+(p/2))*k,71*k);
    ctx.lineTo(138*k,71*k);     //liniq 82mm otdolu

    ctx.moveTo((56+(p/2))*k,35*k);
    ctx.lineTo(138*k,35*k);     //liniq 82mm otgore

    ctx.moveTo(138*k,35*k);
    ctx.lineTo(138*k,71*k);     //liniq 4

    ctx.moveTo(138*k,35*k);
    ctx.lineTo(138*k,29*k);     //liniq 4

    ctx.moveTo(138*k,71*k);
    ctx.lineTo(138*k,77*k);     //liniq 4

    ctx.moveTo(138*k,29*k);
    ctx.lineTo(183*k,29*k);     //liniq 45mm otgore

    ctx.moveTo(138*k,77*k);
    ctx.lineTo(183*k,77*k);     //liniq 45mm otdolu

    ctx.moveTo(183*k,29*k);
    ctx.lineTo(183*k,77*k);     //liniq 5

    ctx.moveTo(183*k,31.5*k);
    ctx.lineTo(186*k,31.5*k);       //liniq 3mm otgore

    ctx.moveTo(183*k,74.5*k);
    ctx.lineTo(186*k,74.5*k);       //liniq 3mm otdolu


    ctx.moveTo(186*k,27*k);
    ctx.lineTo(186*k,79*k);     //liniq 6

    ctx.moveTo(186*k,27*k);
    ctx.lineTo(191*k,27*k);     //liniq 5mm otgore

    ctx.moveTo(186*k,79*k);
    ctx.lineTo(191*k,79*k);     //liniq 5mm otdolu

    ctx.moveTo(191*k,27*k);
    ctx.lineTo(191*k,79*k);     //liniq 7

    ctx.moveTo(193*k,29*k);
    ctx.lineTo(193*k,77*k);     //liniq 8

    ctx.moveTo(191*k,27*k);
    ctx.lineTo(193*k,29*k);     //ъгъл 45 горе

    ctx.moveTo(191*k,79*k);
    ctx.lineTo(193*k,77*k);     //ъгъл 45 долу

    ctx.moveTo(193*k,35*k);
    ctx.lineTo(263*k,35*k);     //liniq 70mm gore

    ctx.moveTo(193*k,71*k);
    ctx.lineTo(263*k,71*k);     //liniq 70mm dolu

    ctx.moveTo(263*k,35*k);
    ctx.lineTo(263*k,71*k);     //liniq 9

    ctx.moveTo(263*k,40.5*k);
    ctx.lineTo(265*k,40.5*k);   //liniq 2mm otgore

    ctx.moveTo(263*k,65.5*k);
    ctx.lineTo(265*k,65.5*k);   //liniq 2mm otdolu

    ctx.moveTo(265*k,((38+(h/2)))*k);
    ctx.lineTo(265*k,((68+(-h/2)))*k);        //liniq 10

    ctx.moveTo(265*k,((38+(h/2)))*k);
    ctx.lineTo(275*k,((38+(h/2)))*k);        // liniq 10mm otgore

    ctx.moveTo(265*k,((68+(-h/2)))*k);
    ctx.lineTo(275*k,((68+(-h/2)))*k);        //liniq 10mm otdolu

    ctx.moveTo(275*k,((38+(h/2)))*k);
    ctx.lineTo(275*k,((68+(-h/2)))*k);        //liniq 11

    ctx.moveTo(277*k,((40+(h/2)))*k);
    ctx.lineTo(277*k,((66+(-h/2)))*k);        //liniq 12

    ctx.moveTo(277*k,((40+(h/2)))*k);
    ctx.lineTo(275*k,((38+(h/2)))*k);        //ygyl 45

    ctx.moveTo(277*k,((66+(-h/2)))*k);
    ctx.lineTo(275*k,((68+(-h/2)))*k);        //ygyl 45

    ctx.stroke();
    ctx.closePath();

}
function clean()
{
    ctx.clearRect(0,0, canvas.width, canvas.height);
}
</script>
</body
</html>