Advertisement
fevzi02

Будильник

Feb 2nd, 2022
1,336
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.58 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.  
  12.  
  13.       <style>
  14.  
  15.           body{
  16.               background: #365291 }
  17.  
  18.           canvas{
  19.               display: block;
  20.               margin: auto auto;
  21.               border: 10px solid #04112F;
  22.               background: #CBB6CE; }
  23.       </style>
  24.  
  25.  
  26.       <script>
  27.           let c = document.getElementById('pic');
  28.           let ctx = c.getContext('2d');
  29.  
  30.           let x1_;          //для координат кончика стрелочки
  31.           let y1_;          //
  32.           let fi    = -450; //угол стрелочки
  33.           let cnt   = 0;    //счётчик для ушек
  34.           let flag  = 0;    //
  35.           let k     = 1;    //чем больше k, тем ушки двигаются дальше
  36.           let speed = 3;    //скорость стрелочки
  37.           let delay = 10;   //задержка в миллисекундах
  38.  
  39.           setInterval(draw, delay);  //вызывает функцию "draw" повторяя вызов через определённый интервал времени - delay .
  40.  
  41.           function draw(){
  42.               //Очистка всей области Canvas
  43.               ctx.clearRect(0,0,600,600);
  44.               //Отрисовка ножек
  45.               legs(300, 300, 120)
  46.               //Отрисовка корпуса
  47.               circle(300, 300, 120, "red");
  48.               circle(300, 305, 110, "white");
  49.               //Отрисовка циферблата
  50.               bezel(300, 305, 110, 95, "black");
  51.               // когда fi достигнет 270 начнется анимация ушек
  52.               if (fi >= 270){
  53.                   if (flag == 0)
  54.                       cnt++;
  55.                   else if(flag == 1){
  56.                       cnt--;
  57.                       if(cnt == -5)
  58.                           flag = 0;
  59.                   }
  60.                   if (cnt > 5)
  61.                       flag = 1;
  62.               }
  63.               // пока fi не достигло 270 оно увеличивается на speed
  64.               else
  65.                   fi+=speed;
  66.               //Отрисовка стрелочки
  67.               x1_ = 60 * Math.cos(fi * 0.0174533) + 300;
  68.               y1_ = 60 * Math.sin(fi * 0.0174533) + 305;
  69.               drawArrows(300, 305, x1_, y1_, 6);
  70.               //Отрисовка внутреннего круга на начале стрелочки
  71.               circle(300, 305, 5, "#808080");
  72.               //Отрисовка ушек
  73.               ears(200+cnt*k+10, 200+cnt*k+10, 220,220, -5 / 4 * Math.PI, - Math.PI / 4);
  74.               ears(400+cnt*k-10, 200-cnt*k+10, 380,220,  5 / 4 * Math.PI,   Math.PI / 4);
  75.  
  76.           }
  77.           //функция для отрисовки ушек
  78.           function ears(x_, y_, x2_, y2_, _ot, _do){
  79.               //Ушки
  80.               ctx.beginPath();
  81.  
  82.               ctx.lineWidth = 1;
  83.               ctx.arc(x_, y_ ,50, _ot, _do);
  84.               ctx.fill();
  85.               ctx.stroke();
  86.  
  87.               ctx.closePath();
  88.  
  89.               //ножки ушек
  90.               ctx.beginPath();
  91.  
  92.               ctx.strokeStyle = "#2D3839";
  93.               ctx.lineWidth = 8;
  94.               ctx.moveTo(x_, y_);
  95.               ctx.lineTo(x2_, y2_);
  96.               ctx.stroke();
  97.  
  98.               ctx.closePath();
  99.           }
  100.  
  101.           //функция для отрисовки окружности
  102.           function circle(x, y, r, color){
  103.               ctx.beginPath();
  104.  
  105.               ctx.lineWidth = 1;
  106.               ctx.fillStyle = color;
  107.               ctx.arc(x, y, r, 0, 2*Math.PI, true);
  108.               ctx.fill();
  109.               ctx.stroke();
  110.  
  111.               ctx.closePath();
  112.           }
  113.  
  114.           //функция для отрисовки циферблата
  115.           function bezel(x0, y0, r1, r2, color){
  116.               for(let fi = 0; fi < 360; fi += 30){
  117.                  x1 = r1 * Math.cos(fi*0.0174533) + x0
  118.                  y1 = r1 * Math.sin(fi*0.0174533) + y0
  119.                  x2 = r2 * Math.cos(fi*0.0174533) + x0
  120.                  y2 = r2 * Math.sin(fi*0.0174533) + y0
  121.                  x3 = (r2-7) * Math.cos(fi*0.0174533) + x0
  122.                  y3 = (r2-7) * Math.sin(fi*0.0174533) + y0
  123.  
  124.                  ctx.beginPath();
  125.  
  126.                  ctx.moveTo(x1, y1);
  127.                  ctx.lineTo(x2, y2);
  128.                  ctx.stroke();
  129.  
  130.                  ctx.font = "24px serif";
  131.                           ctx.strokeText((fi/30 + 2)%12 + 1, x3-7, y3+7);
  132.  
  133.                  ctx.closePath();
  134.                }
  135.          }
  136.  
  137.          //функция для отрисовки стрелочки
  138.          function drawArrows(fromx, fromy, x_center, y_center, r) {
  139.                 var angle;
  140.                 var x;
  141.                 var y;
  142.  
  143.              ctx.beginPath();
  144.  
  145.              ctx.lineWidth = 5;
  146.              ctx.moveTo(x1_, y1_);
  147.              ctx.lineTo(fromx, fromy);
  148.              ctx.fillStyle = "#000";
  149.              ctx.stroke();
  150.  
  151.              ctx.closePath();
  152.  
  153.                 ctx.beginPath();
  154.  
  155.              ctx.fillStyle = "#454545";
  156.                 angle = Math.atan2(y_center - fromy, x_center - fromx)
  157.                 x = r * Math.cos(angle) + x_center;
  158.                 y = r * Math.sin(angle) + y_center;
  159.                 ctx.moveTo(x, y);
  160.  
  161.                 angle += (1 / 3) * (2 * Math.PI)
  162.                 x = r * Math.cos(angle) + x_center;
  163.                 y = r * Math.sin(angle) + y_center;
  164.                 ctx.lineTo(x, y);
  165.  
  166.                 angle += (1 / 3) * (2 * Math.PI)
  167.                 x = r * Math.cos(angle) + x_center;
  168.                 y = r * Math.sin(angle) + y_center;
  169.                 ctx.lineTo(x, y);
  170.              ctx.fill();
  171.  
  172.                 ctx.closePath();
  173.          }
  174.  
  175.          //функция для отрисовки ножек
  176.          function legs(x0, y0, r){
  177.              r  -= 1;
  178.              ctx.beginPath();
  179.  
  180.              ctx.strokeStyle = "#2D3839";
  181.              ctx.lineWidth = 10;
  182.  
  183.              let x = r * Math.cos(1.0472) + x0;
  184.                 let y = r * Math.sin(1.0472) + y0;
  185.              ctx.moveTo(x, y);
  186.              ctx.lineTo(x+15, y+15);
  187.  
  188.              x = r * Math.cos(2.0944) + x0;
  189.                 y = r * Math.sin(2.0944) + y0;
  190.              ctx.moveTo(x, y);
  191.              ctx.lineTo(x-15, y+15);
  192.  
  193.              ctx.stroke();
  194.  
  195.              ctx.closePath();
  196.          }
  197.  
  198.     </script>
  199.   </body>
  200. </html>
  201.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement