lemansky

Untitled

Dec 4th, 2020 (edited)
423
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  8.     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  9.     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  10.   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
  11.  
  12.     <script>
  13.         document.addEventListener("DOMContentLoaded", function(event){
  14.             let canvas = document.getElementById("canvasId");
  15.             let canvasId = canvas.getContext("2d");
  16.             let mouse;
  17.  
  18.             document.addEventListener("click", function(evt){
  19.                 mouse = mouse_player1(evt, canvas);
  20.  
  21.             });
  22.         });
  23.  
  24.         const mouse_player1 = (evt, canvas) => {
  25.             var rect = canvas.getBoundingClientRect(); // взима позицията на платното в документа, в случай, че то не започва от горния ляв ъгъл
  26.             var mouseX = evt.clientX - rect.left; // позицията на курсора по хоризонтала
  27.             var mouseY = evt.clientY - rect.top; // позиията на курсора по вертикала
  28.             return {
  29.                 x: mouseX,
  30.                 y: mouseY,
  31.             } // фунцкията връша два параметъра, x и y
  32.         }
  33.  
  34.         </script>
  35.     <style type="text/css">
  36.     #canvasId{
  37.         background: black;
  38.     }
  39.     </style>
  40. </head>
  41. <body class="p-2">
  42.     <div class="container-fluid">
  43.         <div class="row">
  44.             <div class="col-auto">
  45.                 <canvas id="canvasId" class="d-block" width="700" height="600"></canvas>
  46.             </div>
  47.             <div class="col-3">
  48.  
  49.                 <div class="form-group ">
  50.                     <div class="custom-control custom-radio d-inline-block mx-4">
  51.                         <input type="radio" id="shape1" name="shape" class="custom-control-input" value="Rect" >
  52.                         <label class="custom-control-label" for="shape1">Четириъгълник</label>
  53.                     </div>
  54.                     <div class="custom-control custom-radio d-inline-block mx-4">
  55.                         <input type="radio" id="shape2" name="shape" class="custom-control-input" value="Circle">
  56.                         <label class="custom-control-label" for="shape2">Окръжност</label>
  57.                     </div>
  58.                 </div>
  59.  
  60.                 <div class="form-group">
  61.                     <label> Координат по X </label>
  62.                     <input class="form-control" id="posX" value="100"></input>
  63.                 </div>
  64.                 <div class="form-group">
  65.                     <label> Координат по Y </label>
  66.                     <input class="form-control" id="posY" value="100"></input>
  67.                 </div>
  68.                 <div class="form-group">
  69.                     <label> Широчина </label>
  70.                     <input class="form-control" id="sizeX" value="200"></input>
  71.                 </div>
  72.                 <div class="form-group">
  73.                     <label> Височина </label>
  74.                     <input class="form-control" id="sizeY" value="20"></input>
  75.                 </div>
  76.                 <div class="form-group">
  77.                     <input type="button" class="btn btn-info btn-block" id="drawShape" value="Създай">
  78.                 </div>
  79.             </div>
  80.         </div>
  81.     </div>
  82. </body>
  83. </html>
RAW Paste Data