459 lines
22 KiB
HTML
459 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Часы</title>
|
||
<style>
|
||
body {
|
||
background-image: url(grnWatch.png);
|
||
background-size: cover;
|
||
background-position: center;
|
||
height: 100vh;
|
||
margin: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
#signs, #alarm {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-34%, -53%) scale(0.88); /* Смещение по ширине и высоте / масштабирование на 80% */
|
||
width: 616px; /* Фиксируем ширину */
|
||
height: 616px; /* Фиксируем высоту */
|
||
}
|
||
</style>
|
||
<script>
|
||
// --------------------------------- Скрипт канваса со знаками -----------------------------------------------
|
||
function signs()
|
||
{
|
||
var canvas = document.getElementById('signs'); // получаем объект канваса
|
||
var ctx = canvas.getContext('2d'); // у него есть свойство - контекст рисования
|
||
var width=canvas.width,height=canvas.height; //Размеры "холста" это нужно, чтобы круги выстраивались
|
||
// --- установим стили рисунка -----------------------------------------------------------------------
|
||
ctx.shadowColor = "Coral"; // Цвет тени
|
||
ctx.shadowOffsetX = 5;
|
||
ctx.shadowOffsetY = 5;
|
||
ctx.shadowBlur = 5;
|
||
ctx.strokeStyle = 'DarkCyan'; // Цвет линии
|
||
ctx.fillStyle = "Teal"; // Цвет заполненной плоскости
|
||
// Удачный вариант круга по центру 198 - - - - - - - - -
|
||
const X = canvas.width / 2; const Y = canvas.height / 2;
|
||
//const radius = 198;
|
||
ctx.lineWidth = 1; // установим толщину линии:
|
||
// --- Круг 198 --------------------------
|
||
ctx.beginPath();
|
||
ctx.arc(X, Y, 198, 0, 2 * Math.PI, false);
|
||
ctx.stroke();
|
||
// --- Круг 208 --------------------------
|
||
ctx.beginPath();
|
||
ctx.arc(X, Y, 208, 0, 2 * Math.PI, false);
|
||
ctx.stroke();
|
||
//---- Круг 233 --------------------------
|
||
ctx.beginPath();
|
||
ctx.arc(X, Y, 233, 0, 2 * Math.PI, false);
|
||
ctx.stroke();
|
||
//---- Круг 303 --------------------------
|
||
ctx.beginPath();
|
||
ctx.arc(X, Y, 303, 0, 2 * Math.PI, false);
|
||
ctx.stroke();
|
||
//Рисует 12 кружков, соответствующих часам
|
||
for(var i=0;i<=Math.PI*2;i+=Math.PI*2/12) //Math.PI*2 - полный круг часов,Math.PI*2/12 - это 1/12 полного круга часов
|
||
{
|
||
ctx.beginPath();
|
||
ctx.arc(width/2+220*Math.cos(i), // 2 center полного круга кружков,220 shirina полного круга кружков
|
||
height/2+220*Math.sin(i), // 2 center полного круга кружков,220 visota полного круга кружков
|
||
13,0,2*Math.PI); //13 radius кружков,0 uglovoe sehenie кружков,2 vopros
|
||
ctx.fill();
|
||
ctx.closePath();
|
||
}
|
||
//Рисует 30 кружков, соответствующих часам
|
||
for(var i=0;i<=Math.PI*2;i+=Math.PI*2/60) //Math.PI*2 - полный круг часов,Math.PI*2/12 - это 1/12 полного круга часов
|
||
{
|
||
ctx.beginPath();
|
||
ctx.arc(width/2+203*Math.cos(i), //2 center полного круга кружков,220 shirina полного круга кружков
|
||
height/2+203*Math.sin(i), //2 center полного круга кружков,220 visota полного круга кружков
|
||
5,0,2*Math.PI); //13 radius кружков,0 uglovoe sehenie кружков,2 vopros
|
||
ctx.fill();
|
||
ctx.closePath();
|
||
}
|
||
// --- Рисует 12 кругов для символов ---
|
||
for(var i=0;i<=Math.PI*2;i+=Math.PI*2/12) //Math.PI*2 - полный круг часов,Math.PI*2/12 - это 1/12 полного круга часов
|
||
{
|
||
ctx.beginPath();
|
||
ctx.arc(width/2+268*Math.cos(i), // 2 center полного круга кружков,220 shirina полного круга кружков
|
||
height/2+268*Math.sin(i), // 2 center полного круга кружков,220 visota полного круга кружков
|
||
34,0,2*Math.PI); //13 radius кружков,0 uglovoe sehenie кружков,2 vopros
|
||
ctx.stroke();
|
||
ctx.closePath();
|
||
}
|
||
//-----------------------------------------------------------------------------------------------------------------------------------------------
|
||
// Получаем центр канваса
|
||
var centerX = canvas.width / 2;
|
||
var centerY = canvas.height / 2;
|
||
// --- 1 --- Вертикальная линия двойка ----------------------------------------------------------------------------------------------------------
|
||
// Определяем смещение и масштабирование для пропорций
|
||
var xOffset = 441 - centerX; // Смещение по X относительно центра
|
||
var yOffset = 42 - centerY; // Смещение по Y относительно центра
|
||
var scaleX = 1; // Масштабирование по X (1 - без изменений)
|
||
var scaleY = 1; // Масштабирование по Y (1 - без изменений)
|
||
// Новые координаты точек с учетом центра и пропорций
|
||
var startX = centerX + xOffset * scaleX;
|
||
var startY = centerY + yOffset * scaleY;
|
||
var endX = centerX + xOffset * scaleX;
|
||
var endY = centerY - 230 * scaleY; // Предполагаем, что это правильная высота
|
||
// Рисуем линию
|
||
ctx.beginPath();
|
||
ctx.moveTo(startX, startY);
|
||
ctx.lineTo(endX, endY);
|
||
ctx.closePath();
|
||
ctx.stroke();
|
||
// --- 2 --- Вертикальная линия единица ---------------------------------------------------------------------------------------------------------
|
||
// Определяем смещение и масштабирование для пропорций
|
||
var xOffset = 540 - centerX; // Смещение по X относительно центра
|
||
var yOffset = 208 - centerY; // Смещение по Y относительно центра
|
||
var scaleX = 1; // Масштабирование по X (1 - без изменений)
|
||
var scaleY = 1; // Масштабирование по Y (1 - без изменений)
|
||
// Новые координаты точек с учетом центра и пропорций
|
||
var startX = centerX + xOffset * scaleX;
|
||
var startY = centerY + yOffset * scaleY;
|
||
var endX = centerX + xOffset * scaleX;
|
||
var endY = centerY - 167 * scaleY; // Предполагаем, что это правильная высота
|
||
// Рисуем линию
|
||
ctx.beginPath();
|
||
ctx.moveTo(startX, startY);
|
||
ctx.lineTo(endX, endY);
|
||
ctx.closePath();
|
||
ctx.stroke();
|
||
// --- 3 --- Треугольник ------------------------------------------------------------------------------------------------------------------------
|
||
for (var i = 0; i < 3; i++) {
|
||
// var center_x = centerX + 232;
|
||
// var center_y = centerY - 133;
|
||
var center_x = centerX + 269;
|
||
var center_y = centerY;
|
||
var radius = 34;
|
||
var angle = -i * 120 * Math.PI / 180 + Math.PI / 2;
|
||
var x1 = center_x + radius * Math.cos(angle);
|
||
var y1 = center_y - radius * Math.sin(angle);
|
||
var next_i = (i + 1) % 3;
|
||
var next_angle = -next_i * 120 * Math.PI / 180 + Math.PI / 2;
|
||
var x2 = center_x + radius * Math.cos(next_angle);
|
||
var y2 = center_y - radius * Math.sin(next_angle);
|
||
ctx.beginPath();
|
||
ctx.moveTo(x1, y1);
|
||
ctx.lineTo(x2, y2);
|
||
ctx.stroke();
|
||
ctx.closePath();}
|
||
// --- 4 --- Kвадрат ----------------------------------------------------------------------------------------------------------------------------
|
||
for (var i = 0; i < 4; i++) {
|
||
var center_x = centerX + 232;
|
||
var center_y = centerY + 134;
|
||
var radius = 34;
|
||
var angle = -i * 90 * Math.PI / 180 + Math.PI / 4;
|
||
var x1 = center_x + radius * Math.cos(angle);
|
||
var y1 = center_y - radius * Math.sin(angle);
|
||
var next_i = (i + 1) % 4;
|
||
var next_angle = -next_i * 90 * Math.PI / 180 + Math.PI / 4;
|
||
var x2 = center_x + radius * Math.cos(next_angle);
|
||
var y2 = center_y - radius * Math.sin(next_angle);
|
||
ctx.beginPath();
|
||
ctx.moveTo(x1, y1);
|
||
ctx.lineTo(x2, y2);
|
||
ctx.stroke();
|
||
ctx.closePath();}
|
||
// --- 5 --- Пятиконечная звезда ----------------------------------------------------------------------------------------------------------------
|
||
for (var i = 0; i < 5; i++) {
|
||
var center_x = centerX + 134;
|
||
var center_y = centerY + 233;
|
||
var radius = 34;
|
||
var angle = -i * 144 * Math.PI / 180 + Math.PI / 2;
|
||
var x1 = center_x + radius * Math.cos(angle);
|
||
var y1 = center_y - radius * Math.sin(angle);
|
||
var next_i = (i + 1) % 5;
|
||
var next_angle = -next_i * 144 * Math.PI / 180 + Math.PI / 2;
|
||
var x2 = center_x + radius * Math.cos(next_angle);
|
||
var y2 = center_y - radius * Math.sin(next_angle);
|
||
ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.stroke();ctx.closePath();}
|
||
// --- Рисование линии 6-й час --- Шестиконечная звезда мозаика ----------------------------------------------------
|
||
// Рисование линии 6-й час (часть 1)
|
||
for (var i = 0; i < 3; i++) {
|
||
var center_x = centerX;
|
||
var center_y = centerY + 268;
|
||
var radius = 34;
|
||
var angle = -i * 120 * Math.PI / 180 + Math.PI / 2;
|
||
var x1 = center_x + radius * Math.cos(angle);
|
||
var y1 = center_y - radius * Math.sin(angle);
|
||
var next_i = (i + 1) % 3;
|
||
var next_angle = -next_i * 120 * Math.PI / 180 + Math.PI / 2;
|
||
var x2 = center_x + radius * Math.cos(next_angle);
|
||
var y2 = center_y - radius * Math.sin(next_angle);
|
||
ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.lineWidth = 1;ctx.stroke();ctx.closePath();}
|
||
// Рисование линии 6-й час (часть 2)
|
||
for (var i = 0; i < 3; i++) {
|
||
var center_x = centerX;
|
||
var center_y = centerY + 268;
|
||
var radius = 34;
|
||
var angle = -i * 120 * Math.PI / 180 + Math.PI / 6;
|
||
var x1 = center_x + radius * Math.cos(angle);
|
||
var y1 = center_y - radius * Math.sin(angle);
|
||
var next_i = (i + 1) % 3;
|
||
var next_angle = -next_i * 120 * Math.PI / 180 + Math.PI / 6;
|
||
var x2 = center_x + radius * Math.cos(next_angle);
|
||
var y2 = center_y - radius * Math.sin(next_angle);
|
||
ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.stroke();ctx.closePath();}
|
||
// Рисование оставшихся линий снежинка
|
||
for (let i = 0; i < 6; i++) {
|
||
const center_x = centerX;
|
||
const center_y = centerY + 268;
|
||
const radius = 20;
|
||
const rotationAngle = 30 * Math.PI / 180; // Поворот на 30 градусов
|
||
const angle = -i * 60 * Math.PI / 180 + Math.PI / 6 + rotationAngle;
|
||
const x1 = center_x + radius * Math.cos(angle);
|
||
const y1 = center_y - radius * Math.sin(angle);
|
||
const next_i = (i + 2) % 6;
|
||
const next_angle = -next_i * 60 * Math.PI / 180 + Math.PI / 6 + rotationAngle;
|
||
const x2 = center_x + radius * Math.cos(next_angle);
|
||
const y2 = center_y - radius * Math.sin(next_angle);
|
||
ctx.beginPath();ctx.moveTo(center_x, center_y);ctx.lineTo(x1, y1);ctx.stroke();ctx.closePath();
|
||
ctx.beginPath();ctx.moveTo(center_x, center_y);ctx.lineTo(x2, y2);ctx.stroke();ctx.closePath();}
|
||
// --- 7 --- Семиконечная звезда ----------------------------------------------------------------------------------------------------------------
|
||
for (var i = 0; i < 7; i++) {
|
||
var center_x = centerX - 144;
|
||
var center_y = centerY + 233;
|
||
var radius = 34;
|
||
var angle = -i * (360 / 7) * Math.PI / 180 + Math.PI / 2;
|
||
var x1 = center_x + radius * Math.cos(angle) + 10;
|
||
var y1 = center_y - radius * Math.sin(angle) - 1;
|
||
var next_i = (i + 3) % 7;
|
||
var next_angle = -next_i * (360 / 7) * Math.PI / 180 + Math.PI / 2;
|
||
var x2 = center_x + radius * Math.cos(next_angle) + 10;
|
||
var y2 = center_y - radius * Math.sin(next_angle) - 1;
|
||
ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.stroke();ctx.closePath();}
|
||
// --- 8 --- Восьмиконечная звезда --------------------------------------------------------------------------------------------------------------
|
||
// --- var rds34 --- глобальная переменная для всех радиусов 34 -------------------------------------------
|
||
var rds34 = 34;
|
||
// Рисование линии 8-й час (часть 1)
|
||
for (var i = 0; i < 4; i++) {
|
||
var angle = -i * 90 * Math.PI / 180 + Math.PI / 2;
|
||
var center_x = centerX - 232;
|
||
var center_y = centerY + 134;
|
||
var x1 = center_x + rds34 * Math.cos(angle);
|
||
var y1 = center_y - rds34 * Math.sin(angle);
|
||
var next_i = (i + 1) % 4;
|
||
var next_angle = -next_i * 90 * Math.PI / 180 + Math.PI / 2;
|
||
var x2 = center_x + rds34 * Math.cos(next_angle);
|
||
var y2 = center_y - rds34 * Math.sin(next_angle);
|
||
ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.stroke();ctx.closePath();}
|
||
// Рисование линии 8-й час (часть 2)
|
||
for (var i = 0; i < 4; i++) {
|
||
var angle = -i * 90 * Math.PI / 180 + Math.PI / 4;
|
||
var radius = 34;
|
||
var center_x = centerX - 232;
|
||
var center_y = centerY + 134;
|
||
var x1 = center_x + radius * Math.cos(angle);
|
||
var y1 = center_y - radius * Math.sin(angle);
|
||
var next_i = (i + 1) % 4;
|
||
var next_angle = -next_i * 90 * Math.PI / 180 + Math.PI / 4;
|
||
var x2 = center_x + radius * Math.cos(next_angle);
|
||
var y2 = center_y - radius * Math.sin(next_angle);
|
||
ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.stroke();ctx.closePath();}
|
||
// --- 9 --- Девятиконечная звезда -------------------------------------------------------------------------------------------------------------
|
||
for (var j = -1; j <= 1; j++) {
|
||
for (var i = 0; i < 3; i++) {
|
||
var angle = -i * 120 * Math.PI / 180 + Math.PI / 2 + 2 * Math.PI / 9 * j;
|
||
var center_x = centerX - 269;
|
||
var center_y = centerY;
|
||
var x1 = center_x + 34 * Math.cos(angle);
|
||
var y1 = center_y - 34 * Math.sin(angle);
|
||
var next_i = (i + 1) % 3;
|
||
var next_angle = -next_i * 120 * Math.PI / 180 + Math.PI / 2 + 2 * Math.PI / 9 * j;
|
||
var x2 = center_x + 34 * Math.cos(next_angle);
|
||
var y2 = center_y - 34 * Math.sin(next_angle);
|
||
ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.stroke();ctx.closePath();
|
||
}
|
||
}
|
||
// --- 10 --- Деcятиконечная звезда -------------------------------------------------------------------------------------------------------------
|
||
// Рисование линии 10-й час (часть 1)
|
||
var cntrx10 = centerX - 232;
|
||
var cntry10 = centerY - 134;
|
||
for (var i = 0; i < 5; i++) {
|
||
var angle = -i * 144 * Math.PI / 180 + Math.PI / 2;
|
||
var x1 = cntrx10 + 34 * Math.cos(angle);
|
||
var y1 = cntry10 - 34 * Math.sin(angle);
|
||
var next_i = (i + 1) % 5;
|
||
var next_angle = -next_i * 144 * Math.PI / 180 + Math.PI / 2;
|
||
var x2 = cntrx10 + 34 * Math.cos(next_angle);
|
||
var y2 = cntry10 - 34 * Math.sin(next_angle);
|
||
ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.stroke();ctx.closePath();}
|
||
// Рисование линии 10-й час (часть 2)
|
||
for (var i = 0; i < 5; i++) {
|
||
var angle = -i * 144 * Math.PI / 180 + Math.PI / 2;
|
||
var x1 = cntrx10 + 34 * Math.cos(angle);
|
||
var y1 = cntry10 + 34 * Math.sin(angle); // Изменение знака
|
||
var next_i = (i + 1) % 5;
|
||
var next_angle = -next_i * 144 * Math.PI / 180 + Math.PI / 2;
|
||
var x2 = cntrx10 + 34 * Math.cos(next_angle);
|
||
var y2 = cntry10 + 34 * Math.sin(next_angle); // Изменение знака
|
||
ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.stroke();ctx.closePath();}
|
||
// --- 11 --- Рисование линии 11-й час Одинадцатиконечная звезда -----------------------------------------------------------------------------
|
||
for (var i = 0; i < 11; i++) {
|
||
var angle_increment = 360 / 11;
|
||
var center_x = centerX - 134;
|
||
var center_y = centerY - 232;
|
||
var angle = -i * angle_increment * Math.PI / 180 + Math.PI / 2;
|
||
var x1 = center_x + 34 * Math.cos(angle);
|
||
var y1 = center_y - 34 * Math.sin(angle);
|
||
var next_i = (i + 4) % 11; // Смещение на 4 шага вперед для 11-конечной звезды
|
||
var next_angle = -next_i * angle_increment * Math.PI / 180 + Math.PI / 2;
|
||
var x2 = center_x + 34 * Math.cos(next_angle);
|
||
var y2 = center_y - 34 * Math.sin(next_angle);
|
||
ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.stroke();ctx.closePath();}
|
||
// --- 12 --- Рисование линии 12-й час ------------------------------------------------------------------------------------------------------
|
||
for (var i = 0; i < 12; i++) {
|
||
const center_x = centerX;
|
||
const center_y = centerY - 268;
|
||
const radius = 34;
|
||
var angle = -i * 30 * Math.PI / 180 + Math.PI / 2 + 2 * Math.PI / 24;
|
||
var x1 = center_x + radius * Math.cos(angle);
|
||
var y1 = center_y - radius * Math.sin(angle);
|
||
var next_i = (i + 1) % 12;
|
||
var next_angle = -next_i * 30 * Math.PI / 180 + Math.PI / 2 + 2 * Math.PI / 24;
|
||
var x2 = center_x + radius * Math.cos(next_angle);
|
||
var y2 = center_y - radius * Math.sin(next_angle);
|
||
ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.stroke();ctx.closePath();}
|
||
// Уголки квадрато-треугольников
|
||
a1=center_x + 143
|
||
a2=center_x + 143
|
||
a3=center_x + 159
|
||
b1=center_y - 70
|
||
b2=center_y - 51
|
||
b3=center_y - 60
|
||
ctx.beginPath();ctx.moveTo(a1,b1);ctx.lineTo(a2,b2);ctx.lineTo(a3,b3);ctx.stroke();ctx.closePath();
|
||
//
|
||
c1=center_x + 167
|
||
c2=center_x + 151
|
||
c3=center_x + 167
|
||
d1=center_y - 46
|
||
d2=center_y - 36
|
||
d3=center_y - 28
|
||
ctx.beginPath();ctx.moveTo(c1,d1);ctx.lineTo(c2,d2);ctx.lineTo(c3,d3);ctx.stroke();ctx.closePath();
|
||
//
|
||
e1=center_x + 159
|
||
e2=center_x + 143
|
||
e3=center_x + 143
|
||
f1=center_y - 13
|
||
f2=center_y - 22
|
||
f3=center_y
|
||
ctx.beginPath();ctx.moveTo(e1,f1);ctx.lineTo(e2,f2);ctx.lineTo(e3,f3);ctx.stroke();ctx.closePath();
|
||
//
|
||
g1=center_x + 110
|
||
g2=center_x + 126
|
||
g3=center_x + 126
|
||
h1=center_y - 13
|
||
h2=center_y - 21
|
||
h3=center_y
|
||
ctx.beginPath();ctx.moveTo(g1,h1);ctx.lineTo(g2,h2);ctx.lineTo(g3,h3);ctx.stroke();ctx.closePath();
|
||
//
|
||
i1=center_x + 102
|
||
i2=center_x + 116
|
||
i3=center_x + 102
|
||
j1=center_y - 46
|
||
j2=center_y - 36
|
||
j3=center_y - 28
|
||
ctx.beginPath();ctx.moveTo(i1,j1);ctx.lineTo(i2,j2);ctx.lineTo(i3,j3);ctx.stroke();ctx.closePath();
|
||
//
|
||
k1=center_x + 126
|
||
k2=center_x + 126
|
||
k3=center_x + 110
|
||
l1=center_y - 70
|
||
l2=center_y - 51
|
||
l3=center_y - 60
|
||
ctx.beginPath();ctx.moveTo(k1,l1);ctx.lineTo(k2,l2);ctx.lineTo(k3,l3);ctx.stroke();ctx.closePath();
|
||
// поворот 6-угольной конструкции на 30 градусов
|
||
const rotationAngle = 30 * Math.PI / 180;
|
||
for (let i = 0; i < 6; i++) {
|
||
const center_x = centerX;
|
||
const center_y = centerY - 268;
|
||
const radius = 18;
|
||
const angle = -i * 60 * Math.PI / 180 + Math.PI / 6 + rotationAngle;
|
||
const x1 = center_x + radius * Math.cos(angle);
|
||
const y1 = center_y - radius * Math.sin(angle);
|
||
const next_i = (i + 1) % 6;
|
||
const next_angle = -next_i * 60 * Math.PI / 180 + Math.PI / 6 + rotationAngle;
|
||
const x2 = center_x + radius * Math.cos(next_angle);
|
||
const y2 = center_y - radius * Math.sin(next_angle);
|
||
ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.stroke();ctx.closePath();}
|
||
// Рисование оставшихся линий снежинка
|
||
for (let i = 0; i < 6; i++) {
|
||
const center_x = centerX;
|
||
const center_y = centerY - 268;
|
||
const radius = 18;
|
||
const angle = -i * 60 * Math.PI / 180 + Math.PI / 6 + rotationAngle;
|
||
const x1 = center_x + radius * Math.cos(angle);
|
||
const y1 = center_y - radius * Math.sin(angle);
|
||
const next_i = (i + 2) % 6;
|
||
const next_angle = -next_i * 60 * Math.PI / 180 + Math.PI / 6 + rotationAngle;
|
||
const x2 = center_x + radius * Math.cos(next_angle);
|
||
const y2 = center_y - radius * Math.sin(next_angle);
|
||
ctx.beginPath();ctx.moveTo(center_x, center_y);ctx.lineTo(x1, y1);ctx.stroke();ctx.closePath();
|
||
ctx.beginPath();ctx.moveTo(center_x, center_y);ctx.lineTo(x2, y2);ctx.stroke();ctx.closePath();}
|
||
// --------------------
|
||
}
|
||
|
||
// ------------ Скрипт канваса с часами ----------------------------------------------------------
|
||
function load()
|
||
{
|
||
var canvas=document.getElementById("alarm"); // Получаем DOM-объект нашего "холста"
|
||
var ctx=canvas.getContext("2d"); //Берём его контекст (с его помощью и будем рисовать)
|
||
var width=canvas.width,height=canvas.height; //Размеры "холста"
|
||
|
||
ctx.shadowColor = "Coral";
|
||
ctx.shadowOffsetX = 5;
|
||
ctx.shadowOffsetY = 5;
|
||
ctx.shadowBlur = 5;
|
||
ctx.fillStyle = "Teal";
|
||
ctx.strokeStyle = "DarkCyan";
|
||
|
||
var position_s=0,position_m=0,position_h=0; //Получаем значения в радианах, соответствующие градусам,
|
||
//на которые повернётся соответствующая стрелка часов за секунду
|
||
var sec=6*Math.PI/180,
|
||
min =1/ 10*Math.PI/180,
|
||
hour=1/120*Math.PI/180;
|
||
//И текущее положение стрелок на часах
|
||
//С переводом из секунд в соответствующие единицы времени
|
||
position_s=new Date().getSeconds()*sec;
|
||
position_m=new Date().getMinutes()*60*min;
|
||
position_h=new Date().getHours()*3600*hour+new Date().getMinutes()*60*hour;
|
||
function alarm()//функция перерисовки Canvas'а вызывается каждую секунду
|
||
{
|
||
function line(pos,r,w)
|
||
{ //функция рисования линии
|
||
ctx.lineWidth=w||1; //первый аргумент - градус поворота стрелки
|
||
ctx.beginPath();
|
||
ctx.moveTo(width/2,height/2); //center conusa
|
||
ctx.lineTo(width/2+r*Math.cos(pos-Math.PI/2), //2 ploscost conusa,
|
||
height/2+r*Math.sin(pos-Math.PI/2));//2 ploscost conusa,
|
||
ctx.stroke();
|
||
ctx.closePath();
|
||
}
|
||
position_s+=sec;
|
||
position_m+=min;
|
||
position_h+=hour;
|
||
ctx.clearRect (0, 0, width, height); //Функция очистки Canvas
|
||
line(position_h,233,8);//Рисование стрелок часов
|
||
line(position_m,208,3);//Рисование стрелок часов
|
||
line(position_s,208,1);//Рисование стрелок часов
|
||
}
|
||
setInterval(alarm,1000); //Создание таймера, вызывающего всю перерисовку
|
||
}
|
||
</script>
|
||
</head>
|
||
<!--body onload="signs(); load(); BckCrc();"-->
|
||
<body onload="signs(); load();">
|
||
<!-------------------------------------------------->
|
||
<canvas width="616" height="616" id="signs"></canvas>
|
||
<canvas width="616" height="616" id="alarm"></canvas>
|
||
<!-------------------------------------------------->
|
||
</body>
|
||
</html>
|