lemansky

Untitled

Nov 29th, 2021
835
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.     <style>
  8.         body{
  9.             margin:0px;
  10.         }
  11.     </style>
  12.     <script>
  13.         document.addEventListener('DOMContentLoaded', function(){
  14.             const canvas = document.getElementById("canvasId");
  15.             const context = canvas.getContext("2d");
  16.  
  17.             // context.beginPath();
  18.             // context.fillStyle = "red";
  19.             // context.arc(100, 100, 50, 0, 2*Math.PI);
  20.             // context.fill();
  21.             // context.closePath();
  22.  
  23.             // context.beginPath();
  24.             // context.fillStyle = "yellow";
  25.             // context.arc(100, 100, 40, 0, 2*Math.PI);
  26.             // context.fill();
  27.             // context.closePath();
  28.            
  29.             context.fillStyle = "red";
  30. // context.fillRect(x_goren_lqv_ygyl, y_goren_lqv_ygyl, shirochina, visochina);
  31.             // let w = 10;
  32.             // for (let i = 0; i < 5; i++) {
  33.             //  // i = 0, 1, 2, 3, 4 -> 50, 160, 270, 380, 490
  34.             //  context.fillRect(50 + i*(w+10), 50, w, 50);
  35.             // }
  36.            
  37.             // let h = 10;
  38.             // for (let i = 0; i < 5; i++) {
  39.             //  // i = 0, 1, 2, 3, 4 -> 50, 160, 270, 380, 490
  40.             //  context.fillRect(300, 100 + i*(h + 10), 100, h);
  41.             // }
  42.  
  43.             let x = 0;
  44.             let w = 50;
  45.             for (let i = 0; i < 5; i++) {
  46.                 // i = 0, x = 0, w = 50
  47.                 // i = 1, x = 60,w = 60
  48.                 // i = 2, x = 130, w = 70,
  49.                 // i = 3, x = 210, w = 80,
  50.                 // i = 4, x = 300, w = 90;
  51.                 context.fillRect(x, 0, w, w);
  52.                 w = w + 10;
  53.                 x = x + w;
  54.             }
  55.  
  56.             w = 50;
  57.             x = canvas.width - w;
  58.             y = 0;
  59.             for (let i = 0; i < 5; i++) {
  60.                 context.fillRect(x, y, w, w);
  61.                 w = w + 10;
  62.                 x = x - 10;
  63.                 y = y + w;
  64.             }
  65.  
  66.             w = 50;
  67.             x = canvas.width - w;
  68.             y = canvas.height - w;
  69.             for (let i = 0; i < 5; i++) {
  70.                 context.fillRect(x, y, w, w);
  71.                 w = w + 10;
  72.                 x = x - w - 10;
  73.                 y = y - 10;
  74.             }
  75.  
  76.             w = 50;
  77.             x = 0;
  78.             y = canvas.height - w;
  79.             for (let i = 0; i < 5; i++) {
  80.                 context.fillRect(x, y, w, w);
  81.                 w = w + 10;
  82.                 y = y - w - 10;
  83.             }
  84.  
  85.             x = canvas.width/2;
  86.             y = canvas.height/2;
  87.             r = 100;
  88.             for (let i = 0; i < 5; i++) {
  89.                 context.beginPath();
  90.                 context.fillStyle = i % 2 == 0 ? "green" : "red";
  91.                 context.arc(x, y, r, 0, 2*Math.PI);
  92.                 context.fill();
  93.                 context.closePath();
  94.                 r = r - 20;
  95.  
  96.             }          
  97.  
  98.         });
  99.     </script>
  100.     <style>
  101.         #canvasId{
  102.             background:black;
  103.         }
  104.     </style>
  105. </head>
  106. <body>
  107.     <canvas id="canvasId" width="800" height="600"></canvas>
  108. </body>
  109. </html>
RAW Paste Data