Часы на HTML5 | Все о создании сайтов

Сегодня вы узнаете (и сможете скачать исходники) о том, как создать симпатичные аналоговые часы с помощью HTML5.

Сам скрипт очень прост, но эта простота, как обычно, впечатляет. И, конечно, вся графика будет размещаться на объекте canvas.

Пример Скачать

Ok, качаем исходники и смотрим, как они работают!

Шаг 1. HTML

Сначала идет разметка часов.

index.html

<!DOCTYPE html>

<head>

<title>HTML5 Clocks | Script Tutorials</title>

</head>

<body>

<h2>HTML5 Clocks</h2>

<a href="http://www.script-tutorials.com/html5-clocks/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>

</header>

</div>

</body>

</html>

Шаг 2. CSS

Далее все необходимые стили.

css/main.css

.clocks {

height: 500px;

margin: 25px auto;

position: relative;

width: 500px;

}

Шаг 3. JS

js/script.js

// переменные

var canvas, ctx;

var clockRadius = 250;

var clockImage;

// функции отрисовки :

function clear() { // очистка

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

}

function drawScene() { // основная функция drawScene

clear(); // очистка канвы

// получение текущего времени

var date = new Date();

var hours = date.getHours();

var minutes = date.getMinutes();

var seconds = date.getSeconds();

hours = hours > 12 ? hours - 12 : hours;

var hour = hours + minutes / 60;

var minute = minutes + seconds / 60;

// сохранение

ctx.save();

// отрисовка часов (как бэк)

ctx.drawImage(clockImage, 0, 0, 500, 500);

ctx.translate(canvas.width / 2, canvas.height / 2);

ctx.beginPath();

// отрисовка чисел

ctx.font = '36px Arial';

ctx.fillStyle = '#000';

ctx.textAlign = 'center';

ctx.textBaseline = 'middle';

for (var n = 1; n <= 12; n++) {

var theta = (n - 3) * (Math.PI * 2) / 12;

var x = clockRadius * 0.7 * Math.cos(theta);

var y = clockRadius * 0.7 * Math.sin(theta);

ctx.fillText(n, x, y);

}

// часы

ctx.save();

var theta = (hour - 3) * 2 * Math.PI / 12;

ctx.rotate(theta);

ctx.beginPath();

ctx.moveTo(-15, -5);

ctx.lineTo(-15, 5);

ctx.lineTo(clockRadius * 0.5, 1);

ctx.lineTo(clockRadius * 0.5, -1);

ctx.fill();

ctx.restore();

// минуты

ctx.save();

var theta = (minute - 15) * 2 * Math.PI / 60;

ctx.rotate(theta);

ctx.beginPath();

ctx.moveTo(-15, -4);

ctx.lineTo(-15, 4);

ctx.lineTo(clockRadius * 0.8, 1);

ctx.lineTo(clockRadius * 0.8, -1);

ctx.fill();

ctx.restore();

// секунды

ctx.save();

var theta = (seconds - 15) * 2 * Math.PI / 60;

ctx.rotate(theta);

ctx.beginPath();

ctx.moveTo(-15, -3);

ctx.lineTo(-15, 3);

ctx.lineTo(clockRadius * 0.9, 1);

ctx.lineTo(clockRadius * 0.9, -1);

ctx.fillStyle = '#0f0';

ctx.fill();

ctx.restore();

}

// инициализация

$(function(){

canvas = document.getElementById('canvas');

ctx = canvas.getContext('2d');

// var width = canvas.width;

// var height = canvas.height;

clockImage = new Image();

clockImage.src = 'images/cface.png';

setInterval(drawScene, 1000); // loop drawScene

});

Сначала определяем основной таймер для отрисовки сцены. Далее с каждым шагом (тиком) скрипт определяет текущее время и отрисовывает стрелки часов (сами стрелки часов, минут и секунд).

Пример Скачать

Выводы

Надеемся сегодняшние часы на HTML5 были для вас впечатляющими. Если вам нужны такие часы в виде плагина для WordPress, оставляйте свои заявки в комментариях. Если будут желающие, такой плагин сделаем, и он будет абсолютно бесплатен. Удачи!

Возможно, Вам будет интересно ↓↓↓

3 комментарий на “Часы на HTML5”

Kemal

21.05.2012 at 01:43 | Ответить

А нельзя ли сделать примерно такие часы drplus.tk/doc/clock/clock011.swf с плавным ходом и тенью со стороны, а не как в css shadow?
- 2Web
  
  21.05.2012 at 04:47 | Ответить
  
  конечно, можно. мб даже можно найти рабочий пример таких часов.
Виталий

31.01.2014 at 11:19 | Ответить

А как можно сделать три копии таких часов на одной страничке?

Шаг 1. HTML

index.html

Шаг 2. CSS

css/main.css

Шаг 3. JS

js/script.js

Выводы

Возможно, Вам будет интересно ↓↓↓

3 комментарий на “Часы на HTML5”

Оставить комментарий Отменить ответ