Guest User

Untitled

a guest
Sep 17th, 2019
88
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function displayCanvas() {
  2. var chas = +document.getElementById("hours").value;
  3. var mins = +document.getElementById("minutes").value;
  4. var canvasHTML = document.getElementById('myCanvas');
  5. var contextHTML = canvasHTML.getContext('2d');
  6. contextHTML.strokeRect(0, 0, canvasHTML.width, canvasHTML.height);
  7.  
  8. //Расчет координат центра и радиуса часов
  9. var radiusClock = canvasHTML.width / 2 - 10;
  10. var xCenterClock = canvasHTML.width / 2;
  11. var yCenterClock = canvasHTML.height / 2;
  12.  
  13. //Очистка экрана.
  14. contextHTML.fillStyle = "#ffffff";
  15. contextHTML.fillRect(0, 0, canvasHTML.width, canvasHTML.height);
  16.  
  17. //Рисуем контур часов
  18. contextHTML.strokeStyle = "#000000";
  19. contextHTML.lineWidth = 1;
  20. contextHTML.beginPath();
  21. contextHTML.arc(xCenterClock, yCenterClock, radiusClock, 0, 2 * Math.PI, true);
  22. contextHTML.moveTo(xCenterClock, yCenterClock);
  23. contextHTML.stroke();
  24. contextHTML.closePath();
  25.  
  26. //Рисуем рисочки часов
  27. var radiusNum = radiusClock - 10; //Радиус расположения рисочек
  28. var radiusPoint;
  29. for (var tm = 0; tm < 60; tm++) {
  30. contextHTML.beginPath();
  31. if (tm % 5 == 0) {
  32. radiusPoint = 5;
  33. } else {
  34. radiusPoint = 2;
  35. } //для выделения часовых рисочек
  36. var xPointM = xCenterClock + radiusNum * Math.cos(-6 * tm * (Math.PI / 180) + Math.PI / 2);
  37. var yPointM = yCenterClock - radiusNum * Math.sin(-6 * tm * (Math.PI / 180) + Math.PI / 2);
  38. contextHTML.arc(xPointM, yPointM, radiusPoint, 0, 2 * Math.PI, true);
  39. contextHTML.stroke();
  40. contextHTML.closePath();
  41. }
  42.  
  43. //Оцифровка циферблата часов
  44. for (var th = 1; th <= 12; th++) {
  45. contextHTML.beginPath();
  46. contextHTML.font = 'bold 25px sans-serif';
  47. var xText = xCenterClock + (radiusNum - 30) * Math.cos(-30 * th * (Math.PI / 180) + Math.PI / 2);
  48. var yText = yCenterClock - (radiusNum - 30) * Math.sin(-30 * th * (Math.PI / 180) + Math.PI / 2);
  49. if (th <= 9) {
  50. contextHTML.strokeText(th, xText - 5, yText + 10);
  51. } else {
  52. contextHTML.strokeText(th, xText - 15, yText + 10);
  53. }
  54. contextHTML.stroke();
  55. contextHTML.closePath();
  56. }
  57.  
  58.  
  59. //Рисуем стрелки
  60. var lengthSeconds = radiusNum - 10;
  61. var lengthMinutes = radiusNum - 15;
  62. var lengthHour = lengthMinutes / 1.5;
  63. var d = new Date(); //Получаем экземпляр даты
  64. var t_sec = 6*d.getSeconds();
  65. var t_min = 6 * (mins + (1 / 60)); //Определяем угол для минут
  66. var t_hour = 30 * (chas + (1 / 60) * mins); //Определяем угол для часов
  67.  
  68.  
  69.  
  70. //Рисуем минуты
  71. contextHTML.beginPath();
  72. contextHTML.strokeStyle = "#000000";
  73. contextHTML.lineWidth = 3;
  74. contextHTML.moveTo(xCenterClock, yCenterClock);
  75. contextHTML.lineTo(xCenterClock + lengthMinutes * Math.cos(Math.PI / 2 - t_min * (Math.PI / 180)),
  76. yCenterClock - lengthMinutes * Math.sin(Math.PI / 2 - t_min * (Math.PI / 180)));
  77. contextHTML.stroke();
  78. contextHTML.closePath();
  79.  
  80. //Рисуем часы
  81. contextHTML.beginPath();
  82. contextHTML.lineWidth = 5;
  83. contextHTML.moveTo(xCenterClock, yCenterClock);
  84. contextHTML.lineTo(xCenterClock + lengthHour * Math.cos(Math.PI / 2 - t_hour * (Math.PI / 180)),
  85. yCenterClock - lengthHour * Math.sin(Math.PI / 2 - t_hour * (Math.PI / 180)));
  86. contextHTML.stroke();
  87. contextHTML.closePath();
  88.  
  89. //Рисуем центр часов
  90. contextHTML.beginPath();
  91. contextHTML.strokeStyle = "#000000";
  92. contextHTML.fillStyle = "#ffffff";
  93. contextHTML.lineWidth = 3;
  94. contextHTML.arc(xCenterClock, yCenterClock, 5, 0, 2 * Math.PI, true);
  95. contextHTML.stroke();
  96. contextHTML.fill();
  97. contextHTML.closePath();
  98.  
  99. return(mins, chas);
  100. }
  101.  
  102.  
  103. window.onload = function () {
  104. window.setInterval(
  105. function () {
  106. var d = new Date();
  107. displayCanvas();
  108. }, 1000);
  109. }
  110. function result() {
  111. var chas = +document.getElementById("hours").value;
  112. var mins = +document.getElementById("minutes").value;
  113.  
  114.  
  115. var minutesAngle = (360 / 60) * mins;
  116. var hoursAdd = (mins / 2);
  117. var hoursAngle = ((360 / 12) * chas) + hoursAdd;
  118.  
  119.  
  120. if (chas > 23 || chas < 1) {
  121. alert("Некорректное время.");
  122. return;
  123. }
  124. if (mins == 60) mins = 0;
  125. if (mins > 60 || mins < 0) {
  126. alert("Некорректное время.");
  127. return;
  128. }
  129. if (chas > 12) {
  130. chas -= 12;
  131. }
  132.  
  133. if (hoursAngle > minutesAngle) {
  134. var minutesAngle = (360 / 60) * mins;
  135. var hoursAdd = (mins / 2);
  136. var hoursAngle = ((360 / 12) * chas) + hoursAdd;
  137. var diff = hoursAngle - minutesAngle;
  138. if (Math.abs(diff) >= 90) {
  139. var a = 360 - diff;
  140. alert("Разница между стрелками = " + Math.abs(a));
  141. } else {
  142. alert("Разница между стрелками = " + Math.abs(diff));
  143. }
  144. } else {
  145. var diff = minutesAngle - hoursAngle;
  146. if (Math.abs(diff) >= 180) {
  147. var a = 360 - diff;
  148. alert("Разница между стрелками = " + Math.abs(a));
  149. } else {
  150. alert("Разница между стрелками = " + Math.abs(diff));
  151. }
  152. }
  153. }
RAW Paste Data