Часы с использованием HTML5


Простой скрипт позволяет создать часы, которые отображают реальный ход времени. Разметка HTML Для создания часов потребуется очень простой код. index.html 01 <!DOCTYPE html> 02 <html lang="ru" > 03 <head> 04 <meta charset="utf-8" /> 05 <title>Часы на HTML5 | Материалы сайта RUSELLER.COM</title> 06 <link href="css/main.css" rel="stylesheet" type="text/css" /> 07 <script src="http://code.jquery.com/jquery-latest.min.js"></script> 08 <script src="js/script.js"></script> 09 </head> 10 <body> 11 <header> 12 <h2>Часы на HTML5</h2> 13 <a href="http://www.ruseller.com/" class="stuts" target="_blank">Материалы сайта <span>RUSELLER.COM</span></a> 14 </header> 15 <div class="clocks"> 16 <canvas id="canvas" width="500" height="500"></canvas> 17 </div> 18 </body> 19 </html> CSS Код CSS для часов еще проще. 1 .clocks { 2 height: 500px; 3 margin: 25px auto; 4 position: relative; 5 width: 500px; 6 } Все остальные правила из файла main.css касаются только оформления демонстрационной страницы. JavaScript js/script.js 01 // Внутренние переменные 02 var canvas, ctx; 03 var clockRadius = 250; 04 var clockImage; 05 06 // Функции рисования: 07 function clear() { // Очистка поля рисования 08 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 09 } 10 11 function drawScene() { // Основная функция drawScene 12 clear(); // Очищаем поле рисования 13 14 // Получаем текущее время 15 var date = new Date(); 16 var hours = date.getHours(); 17 var minutes = date.getMinutes(); 18 var seconds = date.getSeconds(); 19 hours = hours > 12 ? hours - 12 : hours; 20 var hour = hours + minutes / 60; 21 var minute = minutes + seconds / 60; 22 23 // Сохраняем текущий контекст 24 ctx.save(); 25 26 // Рисуем изображение часов (как фон) 27 ctx.drawImage(clockImage, 0, 0, 500, 500); 28 29 ctx.translate(canvas.width / 2, canvas.height / 2); 30 ctx.beginPath(); 31 32 // Рисуем цифры 33 ctx.font = '36px Arial'; 34 ctx.fillStyle = '#000'; 35 ctx.textAlign = 'center'; 36 ctx.textBaseline = 'middle'; 37 for (var n = 1; n <= 12; n++) { 38 var theta = (n - 3) * (Math.PI * 2) / 12; 39 var x = clockRadius * 0.7 * Math.cos(theta); 40 var y = clockRadius * 0.7 * Math.sin(theta); 41 ctx.fillText(n, x, y); 42 } 43 44 // Рисуем часовую стрелку 45 ctx.save(); 46 var theta = (hour - 3) * 2 * Math.PI / 12; 47 ctx.rotate(theta); 48 ctx.beginPath(); 49 ctx.moveTo(-15, -5); 50 ctx.lineTo(-15, 5); 51 ctx.lineTo(clockRadius * 0.5, 1); 52 ctx.lineTo(clockRadius * 0.5, -1); 53 ctx.fill(); 54 ctx.restore(); 55 56 // Рисуем минутную стрелку 57 ctx.save(); 58 var theta = (minute - 15) * 2 * Math.PI / 60; 59 ctx.rotate(theta); 60 ctx.beginPath(); 61 ctx.moveTo(-15, -4); 62 ctx.lineTo(-15, 4); 63 ctx.lineTo(clockRadius * 0.8, 1); 64 ctx.lineTo(clockRadius * 0.8, -1); 65 ctx.fill(); 66 ctx.restore(); 67 68 // Рисуем секундную стрелку 69 ctx.save(); 70 var theta = (seconds - 15) * 2 * Math.PI / 60; 71 ctx.rotate(theta); 72 ctx.beginPath(); 73 ctx.moveTo(-15, -3); 74 ctx.lineTo(-15, 3); 75 ctx.lineTo(clockRadius * 0.9, 1); 76 ctx.lineTo(clockRadius * 0.9, -1); 77 ctx.fillStyle = '#0f0'; 78 ctx.fill(); 79 ctx.restore(); 80 81 ctx.restore(); 82 } 83 84 // Инициализация 85 $(function(){ 86 canvas = document.getElementById('canvas'); 87 ctx = canvas.getContext('2d'); 88 89 // var width = canvas.width; 90 // var height = canvas.height; 91 92 clockImage = new Image(); 93 clockImage.src = 'images/cface.png'; 94 95 setInterval(drawScene, 1000); // Циклическое выполнение функции drawScene 96 }); Готово!