Advertisement
fevzi02

Valya

Mar 31st, 2022
838
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.61 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3.  
  4.   <head>
  5.      <meta charset="UTF-8">
  6.      <title>Часы</title>
  7.   </head>
  8.  
  9.   <body>
  10.       <canvas width = "600" height = "600" id = "pic"></canvas>
  11.       <style>
  12.           body {
  13.                 background: #365291 }
  14.           canvas {
  15.                display: block;
  16.                margin: auto auto;
  17.                border: 10px solid #04112F;
  18.                background: #CBB6CE; }
  19.       </style>
  20.       <script>
  21.           let c = document.getElementById('pic');
  22.           let ctx = c.getContext('2d');
  23.           let x1_;
  24.           let y1_;
  25.           let fi_0 = 270-6/10;
  26.           let fi_1 = 270;
  27.           let fi_2 = 270;
  28.  
  29.           draw();
  30.           setInterval(draw, 100);
  31.          
  32.           // Обновляем холст каждую секунду
  33.           function draw(){
  34.             ctx.clearRect(0,0,600,600);
  35.             circle(300, 300, 120, "#808080");
  36.  
  37.             circle(300, 300, 110, "white");
  38.            
  39.             //2 раза чтобы четче было видно
  40.             arrows(300, 300, 105, 95, "black");
  41.             arrows(300, 300, 105, 95, "black");
  42.            
  43.             //секундная
  44.             fi_0 += 6/10;
  45.             //минутная
  46.             fi_1 += 6/10/60;
  47.             //часовая
  48.             fi_2 += 6/10/60/60;
  49.  
  50.            
  51.            
  52.             x1_ = 40 * Math.cos(fi_2*0.0174533) + 300;
  53.             y1_ = 40 * Math.sin(fi_2*0.0174533) + 300;
  54.             drawArrows(300, 300, x1_, y1_);
  55.            
  56.             x1_ = 70 * Math.cos(fi_1*0.0174533) + 300;
  57.             y1_ = 70 * Math.sin(fi_1*0.0174533) + 300;
  58.             drawArrows(300, 300, x1_, y1_);
  59.            
  60.             x1_ = 80 * Math.cos(fi_0*0.0174533) + 300;
  61.             y1_ = 80 * Math.sin(fi_0*0.0174533) + 300;
  62.             drawArrows(300, 300, x1_, y1_, "red");
  63.  
  64.             circle(300, 300, 5, "#808080");
  65.           }
  66.  
  67.          
  68.           function circle(x, y, r, color){
  69.             ctx.lineWidth = 1;
  70.             ctx.beginPath();
  71.             ctx.arc(x, y, r, 0, 2*Math.PI, true);
  72.             ctx.fillStyle = color;
  73.             ctx.fill();
  74.             ctx.strokeStyle = "black";
  75.             ctx.stroke();
  76.           }
  77.  
  78.           function arrows(x0, y0, r1, r2,  color){
  79.             for(let fi = 0; fi < 360; fi += 30){
  80.                x1 = r1 * Math.cos(fi*0.0174533) + x0
  81.                y1 = r1 * Math.sin(fi*0.0174533) + y0
  82.                x2 = r2 * Math.cos(fi*0.0174533) + x0
  83.                y2 = r2 * Math.sin(fi*0.0174533) + y0
  84.                x3 = (r2-15) * Math.cos(fi*0.0174533) + x0
  85.                y3 = (r2-15) * Math.sin(fi*0.0174533) + y0
  86.  
  87.                ctx.beginPath();       // Начинает новый путь
  88.                ctx.moveTo(x1, y1);    // Передвигает перо в точку (30, 50)
  89.                ctx.lineTo(x2, y2);    // Рисует линию до точки (150, 100)
  90.                ctx.stroke();          // Отображает путь
  91.  
  92.                ctx.font = "24px serif";
  93.                     ctx.strokeText((fi/30+2)%12 +1, x3-7, y3+7);
  94.  
  95.                ctx.strokeStyle = color;
  96.                ctx.stroke();
  97.  
  98.              }
  99.          }
  100.  
  101.          function drawArrows(x_center, y_center, x_, y_, color="black")
  102.          {
  103.            ctx.beginPath();
  104.            ctx.lineWidth = 5;
  105.            ctx.moveTo(x_center, y_center);
  106.            ctx.lineTo(x_, y_);
  107.            ctx.strokeStyle = color;
  108.            ctx.stroke();
  109.            ctx.closePath();
  110.            ctx.fill();
  111.          }
  112.  
  113.        
  114.  
  115.     </script>
  116.   </body>
  117. </html>
  118.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement