API tools faq
paste
Advertisement
fevzi02

Будильник

fevzi02
Feb 2nd, 2022
1,352
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.58 KB | None | 0 0
raw download clone embed print report
  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
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!