lemansky

Untitled

Nov 30th, 2020
434
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.  
  9.         document.addEventListener('DOMContentLoaded', function(){
  10.             const canvas = document.getElementById("canvasId");
  11.             const canvasId = canvas.getContext("2d");
  12.  
  13.             // canvas.addEventListener("mousemove", function(evt){
  14.             //  const mouse = mouse_player1(evt, canvas);
  15.                
  16.             //  // do some tasks
  17.  
  18.             // });
  19.  
  20.             let x = 50; //
  21.             let y = 50; //
  22.  
  23.             const executeTasks = () =>{
  24.                 moveTask();
  25.                 drawTask();
  26.             }
  27.  
  28.             const moveTask = () => {
  29.                 x += 10;
  30.             }
  31.  
  32.             const drawTask = () => {
  33.                 canvasId.fillStyle = "black";
  34.                 canvasId.fillRect(0, 0, canvas.width, canvas.height);
  35.                 canvasId.fillStyle = "green";
  36.                 canvasId.beginPath();
  37.                 canvasId.arc(x, y, 20, 0, Math.PI*2);
  38.                 canvasId.fill();
  39.                 canvasId.closePath();
  40.             }
  41.  
  42.             setInterval(executeTasks, 24);
  43.         });
  44.  
  45.  
  46.  
  47.  
  48.         // const mouse_player1 = (evt, canvas) => {
  49.         //  let rect = canvas.getBoundingClientRect(); // взима позицията на платното в документа, в случай, че то не започва от горния ляв ъгъл
  50.         //  let mouseX = evt.clientX - rect.left; // позицията на курсора по хоризонтала
  51.         //  let mouseY = evt.clientY - rect.top; // позиията на курсора по вертикала
  52.         //  return {
  53.         //      x: mouseX,
  54.         //      y: mouseY,
  55.         //  } // фунцкията връша два параметъра, x и y
  56.         // }
  57.  
  58.            
  59.     </script>
  60.     <style>
  61.         #canvasId{
  62.             background:black;
  63.         }
  64.     </style>
  65. </head>
  66. <body>
  67.     <canvas id="canvasId" width="800" height="600"></canvas>
  68. </body>
  69. </html>
RAW Paste Data