Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>My First Page!</title>
- </head>
- <body>
- <form name="data_IN">
- d9:<input type="text" name="Ax" value="30"><br>
- d10:<input type="text" name="Ay" value="60"><br>
- </form>
- <button onclick="draw();">Draw!</button>
- <button onclick="clean();">Cleaning!</button>
- <button onclick="draw1();">Draw!</button>
- <br>
- <canvas id="myCanvas" width="1000" height="500" style="border:1px solid #d3d3d3;">
- Your browser does not support the HTML5 canvas tag.</canvas>
- <script>
- var c = document.getElementById("myCanvas");
- var ctx = c.getContext("2d");
- function clean()
- {
- ctx.clearRect(0, 0, c.width, c.height);
- }
- function draw1 ()
- {
- var vd9=document.data_IN.Ax.value*1;
- var vd10=document.data_IN.Ay.value*1;
- var dvd9=vd9/2;
- var dvd10=(vd10-60)/2;
- ctx.setLineDash([25, 5,3,5]);
- ctx.beginPath();
- ctx.moveTo(243, 200-dvd9*2-50);
- ctx.lineTo(243, 210);
- ctx.moveTo(480, 200-dvd9*2-50);
- ctx.lineTo(480, 180);
- ctx.moveTo(243, 290-dvd10);
- ctx.lineTo(243, 375+dvd10);
- ctx.moveTo(190,330);
- ctx.lineTo(290, 330);
- ctx.stroke();
- ctx.setLineDash([10, 3]);
- ctx.beginPath();
- ctx.moveTo(203,175);
- ctx.lineTo(284,175);
- ctx.moveTo(279,315);
- ctx.lineTo(207,315);
- ctx.moveTo(279,345);
- ctx.lineTo(207,345);
- ctx.stroke();
- }
- function draw ()
- {
- var vd9=document.data_IN.Ax.value*1;
- var vd10=document.data_IN.Ay.value*1;
- var dvd9=vd9/2;
- var dvd10=(vd10-60)/2;
- //purvaproekciq
- //dolnota4ast
- ctx.setLineDash([0,0,]);
- ctx.beginPath();
- ctx.arc(243, 330, 15, 0, 2 * Math.PI); ////???????????????
- ctx.moveTo(200,200);
- ctx.lineTo(286,200);
- ctx.lineTo(286,200-dvd9);
- ctx.lineTo(277,200-dvd9*2);
- ctx.lineTo(209,200-dvd9*2);
- ctx.lineTo(200,200-dvd9);
- ctx.lineTo(200,200);
- //gornanapurvaproekciq
- ctx.moveTo(209,200-dvd9*2);
- ctx.lineTo(217,200-dvd9*2-15);
- ctx.lineTo(269,200-dvd9*2-15);
- ctx.lineTo(277,200-dvd9*2);
- //nai-gorna 4ast
- ctx.moveTo(228,200-dvd9*2-15);
- ctx.lineTo(228,200-dvd9*2-45);
- ctx.lineTo(258,200-dvd9*2-45);
- ctx.lineTo(258,200-dvd9*2-15);
- //vtoraproekciq
- ctx.moveTo(450-dvd10,200);
- ctx.lineTo(465,200);
- ctx.lineTo(465,185);
- ctx.lineTo(450-dvd10,185);
- ctx.moveTo(450-dvd10,200);//na4alo
- ctx.lineTo(450-dvd10,200-dvd9*2);
- ctx.lineTo(459,200-dvd9*2);
- ctx.lineTo(459,200-dvd9*2-15);
- ctx.lineTo(501,200-dvd9*2-15);
- ctx.moveTo(465,185);
- ctx.lineTo(465,175);
- ctx.lineTo(495,175);
- // mirror
- ctx.moveTo(495,185);
- ctx.lineTo(510+dvd10,185)
- ctx.moveTo(495,200);
- ctx.lineTo(510+dvd10,200);
- ctx.lineTo(510+dvd10,200-dvd9*2);
- ctx.lineTo(501,200-dvd9*2);
- ctx.lineTo(501,200-dvd9*2-15);
- ctx.moveTo(495,200);
- ctx.lineTo(495,175);
- //nai-gorna 4ast
- ctx.moveTo(465,200-dvd9*2-15);
- ctx.lineTo(465,200-dvd9*2-45);
- ctx.lineTo(495,200-dvd9*2-45);
- ctx.lineTo(495,200-dvd9*2-15);
- //treta proekciq
- //vun6en krug
- ctx.moveTo(200,300-dvd10);
- ctx.lineTo(286,300-dvd10);
- ctx.lineTo(286,315);
- ctx.lineTo(279,315);
- ctx.lineTo(279,345);
- ctx.lineTo(286,345);
- ctx.lineTo(286,360+dvd10);
- ctx.lineTo(200,360+dvd10);
- ctx.lineTo(200,345);
- ctx.lineTo(207,345);
- ctx.lineTo(207,315);
- ctx.lineTo(200,315);
- ctx.lineTo(200,300-dvd10);
- //vutre6en krug
- ctx.moveTo(212,300-dvd10);
- ctx.lineTo(212,309);
- ctx.lineTo(217,309);
- ctx.lineTo(217,351);
- ctx.lineTo(212,351);
- ctx.lineTo(212,360+dvd10);
- ctx.moveTo(274,300-dvd10);
- ctx.lineTo(274,309);
- ctx.lineTo(269,309);
- ctx.lineTo(269,351);
- ctx.lineTo(274,351);
- ctx.lineTo(274,360+dvd10);
- //bonus
- ctx.moveTo(217,309);
- ctx.lineTo(269,309);
- ctx.moveTo(217,351);
- ctx.lineTo(269,351);
- ctx.stroke();
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement