lemansky

Untitled

Dec 4th, 2020
428
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.       const canvas = document.getElementById('canvasId');
  15.       const canvasId = canvas.getContext('2d');
  16.  
  17.       const rectangle = new Path2D();
  18.       rectangle.rect(150, 75, 150, 50);
  19.       canvasId.fillStyle = 'red';
  20.       canvasId.fill(rectangle);
  21.  
  22.       document.addEventListener('mousemove', function(evt) {
  23.         mouse = mouse_player1(evt, canvas);
  24.         if (canvasId.isPointInPath(rectangle, mouse.x, mouse.y)) {
  25.           canvasId.fillStyle = 'green';
  26.         }
  27.         else {
  28.           canvasId.fillStyle = 'red';
  29.         }
  30.  
  31.         canvasId.clearRect(0, 0, canvas.width, canvas.height);
  32.         canvasId.fill(rectangle);
  33.       });
  34.     });
  35.  
  36.     const mouse_player1 = (evt, canvas) => {
  37.       var rect = canvas.getBoundingClientRect(); // взима позицията на платното в документа, в случай, че то не започва от горния ляв ъгъл
  38.       var mouseX = evt.clientX - rect.left; // позицията на курсора по хоризонтала
  39.       var mouseY = evt.clientY - rect.top; // позиията на курсора по вертикала
  40.       return {
  41.         x: mouseX,
  42.         y: mouseY,
  43.       } // фунцкията връша два параметъра, x и y
  44.     }
  45.  
  46.     </script>
  47.   <style type="text/css">
  48.   #canvasId{
  49.     background: black;
  50.   }
  51.   </style>
  52. </head>
  53.   <body>
  54.     <canvas id="canvasId" class="d-block" width="700" height="600"></canvas>
  55.   </body>
  56. </html>
RAW Paste Data