lemansky

Untitled

Nov 30th, 2020
465
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.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <script>
  8.         document.addEventListener('DOMContentLoaded', function(){
  9.             const canvas = document.getElementById("canvasId");
  10.             const canvasId = canvas.getContext("2d");
  11.  
  12.             canvas.addEventListener("mousemove", function(evt){
  13.                 const mouse = mouse_player1(evt, canvas);
  14.                 canvasId.fillStyle = "green";
  15.                 canvasId.beginPath();
  16.                 canvasId.arc(mouse.cursor_x, mouse.cursor_y, 20, 0, Math.PI*2);
  17.                 canvasId.fill();
  18.                 canvasId.closePath();
  19.  
  20.             });
  21.         });
  22.  
  23.         const mouse_player1 = (evt, canvas) => {
  24.             let rect = canvas.getBoundingClientRect(); // взима позицията на платното в документа, в случай, че то не започва от горния ляв ъгъл
  25.             let mouseX = evt.clientX - rect.left; // позицията на курсора по хоризонтала
  26.             let mouseY = evt.clientY - rect.top; // позиията на курсора по вертикала
  27.             return {
  28.                 x: mouseX,
  29.                 y: mouseY,
  30.             } // фунцкията връша два параметъра, x и y
  31.         }
  32.  
  33.            
  34.     </script>
  35.     <style>
  36.         #canvasId{
  37.             background:black;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <canvas id="canvasId" width="800" height="600"></canvas>
  43. </body>
  44. </html>
  45.  
RAW Paste Data