Guest User

Untitled

a guest
Dec 16th, 2019
236
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.08 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Document</title>
  5. <style>
  6. canvas{
  7. border: 1px solid black;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <canvas width="400px" height="400px"></canvas>
  13. <script type="text/javascript">
  14. var can = document.getElementsByTagName("canvas")[0];
  15. var c = can.getContext("2d");
  16. var grd = c.createRadialGradient(200,200,25,200,200,200);
  17.  
  18.  
  19.  
  20. x = setInterval(rucicky, 100)
  21.  
  22. function rucicky() {
  23. demonstroMamilla()
  24. c.closePath();
  25. let time = new Date()
  26. let seconds = time.getSeconds()
  27. let minutes = time.getMinutes()
  28. let hours = time.getHours()
  29.  
  30. let uhel = Math.PI*2/60*seconds - Math.PI/2
  31. let uhel2 = Math.PI*2/60*minutes - Math.PI/2
  32. let uhel3 = Math.PI*2/60*hours - Math.PI/2
  33.  
  34. //Sekundy
  35. let x = 200+140 * Math.cos(uhel)
  36. let y = 200+140 * Math.sin(uhel)
  37.  
  38. //Minuty
  39. let x2 = 200+140 * Math.cos(uhel2)
  40. let y2 = 200+140 * Math.sin(uhel2)
  41.  
  42. //Hodiny
  43. let x3 = 200+90 * Math.sin(uhel3)
  44. let y3 = 200+90 * Math.sin(uhel3)
  45. c.beginPath()
  46. c.moveTo(200,200)
  47. c.setLineDash([])
  48. c.lineWidth = 10
  49. c.lineTo(x,y)
  50. c.moveTo(200,200)
  51. c.lineWidth = 6
  52. c.lineTo(x2,y2)
  53. c.lineWidth = 3
  54. c.moveTo(200,200)
  55. c.lineTo(x3,y3)
  56. c.stroke()
  57. c.closePath()
  58. }
  59. function demonstroMamilla() {
  60. c.clearRect(0, 0, 9000, 9000)
  61. grd.addColorStop(0, "#ff007f");
  62. grd.addColorStop(0.6, "#ffe6e6");
  63. grd.addColorStop(1, "#e67a7e");
  64. c.fillStyle = grd;
  65. c.fillRect(0,0,400,400);
  66. c.beginPath();
  67. c.setLineDash([15,15])
  68. c.arc(200, 200, 160, 0, 2*Math.PI);
  69. c.stroke();
  70. }
  71. </script>
  72. </body>
  73. </html>
Advertisement
Add Comment
Please, Sign In to add comment