Grannik
/
grnWatch


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459
							<!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>