В этом примере статьи описывается метод JS+HTML5 для рисования веб -часов. Он рисует часы с маятником, который можно использовать на веб -странице. Его можно отрегулировать по размеру и поместить через кнопки. Конкретный контент реализации выглядит следующим образом.
<html> <Head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> часы </title> <script type = "text/javascript"> var xclock = 300; // Центральное положение var yclock = 250; // Центральное положение var d = 180.0; // Центральный радиус поверхности тактового круга значения var = -d*1,07; function enlarge () {d ++;} function creat () {d-;} function () {var c = document.getElementbyid ("myCanvas"); var g2d = c.getContext ("2d"); G2D.Translate (-1,0); // Установить происхождение оси в центре таблицы C = document.getElementById ("myPendulum"); g2d = c.getContext ("2d"); G2D.Translate (-1,0); // Установить происхождение оси в центре таблицы C = Document.getElementById ("myCanvas"); var g2d = c.getcontext ("2d"); G2D.Translate (1,0); // Установить происхождение оси в центре таблицы C = document.getElementById ("myPendulum"); g2d = c.getContext ("2d"); G2D.Translate (1,0); // Установить ось инициируемой в центре таблицы} функция вверх () {var c = document.getElementById ("myCanvas"); var g2d = c.getcontext ("2d"); G2D.Translate (0, -1); // Установить ось, происходящую в центре таблицы C = document.getElementById ("myPendulum"); g2d = c.getContext ("2d"); G2D.Translate (0, -1); // Установить ось изначально в центре таблицы} функция вниз () {var c = document.getElementById ("myCanvas"); var g2d = c.getContext ("2d"); G2D.Translate (0,1); // Установить ось, происходящую в центре таблицы C = document.getElementById ("myPendulum"); g2d = c.getContext ("2d"); G2D.Translate (0,1); // Установить ось инициируемой в центре таблицы} Функция FillPolygon (A, B, FillColor, CTX) {ctx.beginPath (); ctx.moveto (a [0], b [0]); for (var j = 1; j <a.length; j ++) ctx.lineto (a [j], b [j]); ctx.closepath (); ctx.fillstyle = fillcolor; ctx.fill ();} функция randomColor () {var s = "#"; Math.floor (math.random ()*16) .toString (16); return s;} function locateCoordinate () {var c = document.getElementById ("myCanvas"); var g2d = c.getContext ("2d"); G2D.Translate (xclock, yclock); // Установить ось координат происходят в центре таблицы var c = document.getElementById ("myPendulum"); var g2d = c.getcontext ("2d"); G2D.Translate (xclock, yclock); // Установить ось координат происхождение в центре таблицы} функция DrawFace () {// Определить метод DrawFace на поверхности часов/* массив меньшего размера координат вершины с бриллиантом, представляющие 1, 2, 4, 5, 7, 8, 10, 11 часов*/var x = новая массива (0, математика. var y = new Array (Math.Round (-d*1.07),-d, math.round (-d*0,9),-d);/*массив координат вершины большего размера, представляющего позиции 3, 6, 9, и 12 часов*/var x1 = новая массива (0, Math.roud (d/15), 0, Math.round (-d/15); Array (math.round (-d*1.13),-d, math.round (-d*0,9),-d); var c = document.getElementbyid ("myCanvas"); var g2d = c.getContext ("2d"); // startPath (); G2D.ARC (0,0, D, 0, 2*Math.pi); G2D.Strokestyle = "Lightgray"; g2d.linewidth = d/18; G2D.Stroke (); // Последний ход, нарисуйте край часового круга // Начните готовиться к рисованию алмаза, представляющего каждый час для (var i = 0; i <12; i ++) {// для тела цикла оператора петли начинается, если (i%3 == 0) {// Нарисуйте красный бриллиант большего размера, чтобы представлять 3,6,9,12 точек. } else {// нарисуйте меньший оранжевый бриллиант, чтобы представлять оставшиеся часы FillPolygon (x, y, "Orange", G2D); } // Возьмите центр часов в качестве начала, а система координат вращается по часовой стрелке на 30 градусов, чтобы нарисовать марку алмаза в положении следующего часа G2D.Rotate (math.pi/6.0); } // Для конца тела цикла оператора цикла} // метод притяжения конец поверхности тактовой поверхности/ * Метод определения часовой рукой, минутной руки и второй рукой часовых рисунков * Формальный параметр hradian, единичный радиан, является радиан Радиан, это положение радиана по второй руки, рассчитанное по 0 секунд. */Функция Drawneedles (Hradian, Mradian, Sradian) {var c = document.getElementById ("myCanvas"); var g2d = c.getContext ("2d"); // Возьмите центр часов в качестве происхождения и поверните Hradian Radian по часовой стрелке, чтобы нарисовать Hour Dist G2D.Rotate (hradian); // Оформление координат, представляющих полигоны вершины часовой руки var hx = new Array (0, Math.Round (d/19), 0, Math.Round (-d/19)); var hy = new Array (math.round (-d/2), math.round (-d/3), 0, math.round (-d/3)); FillPolygon (Hx, Hy, «magenta», G2d); // установите часовую руку на пурпур-красное, // взять центр часов в качестве источника и вращать Hradian Radian-Radian против часовой стрелки, чтобы восстановить систему координат G2D.Rotate (-hradian); // Возьмите центр часов в качестве источника, и поверните градианский радиан по часовой стрелке, чтобы нарисовать Minate Hand G2D.Rotate (Mradian); // Координатный массив, представляющий многоугольную вершину минутной руки var mx = new Array (Math.Round (-d/19), 0, Math.round (d/19)); var my = new Array (0, math.round (-d/1.3), 0); FillPolygon (MX, My, "Grey", G2D); // Установить минутную руку к серому // Возьмите часы в качестве начала, а система координат вращает градианский радиан против часовой стрелки, чтобы восстановить систему координат G2D.Rotate (-mradian); // возьмите часы в качестве источника, а система координат вращается в Sradian Radian по часовой стрелке, чтобы нарисовать секунду G2D. -Rotate (Sradian); // второй рукой к случайному цвету g2d.strokestyle = 'green'; g2d.linewidth = "1"; G2D.Moveto (0,0); G2D.LineTo (0, Math.Round (-d/1.1)); G2D.Stroke (); g2d.beginpath (); g2d.arc (0, math.round (-d), d/18, 0, 2*math.pi); G2D.FillStyle = randomColor (); G2D.fill (); // Для последнего удара нарисуйте маленький шарик в вершине второй руки // Возьмите центр часов в качестве начала и поверните шрадийский радиан против часовой стрелки, чтобы восстановить систему координат G2D.Rotate (-Sradian); } // Кодовый блок метода иглы чертежа Drawneedles/* Нарисуйте строку, чтобы представить мгновенное время*/function drawtime () {var time = new Date (); // Получить текущее время. var hour = time.gethours (); // Получить час var minute = time.getminutes (); // Получить минуту var second = time.getSeconds (); // Получить количество секунд var apm = "am"; // По умолчанию Утро: Am. var canvas = document.getElementbyId ("myCanvas"); var g2d = canvas.getContext ("2d"); if (час> 12) {// прекратить отображать час = час 12; apm = "pm"; } if (минута <10) {// Если есть только 1 цифра в минуту, добавьте 0 в Minute = "0"+минута; } if (second <10) {// Если количество секунд составляет всего 1 цифр, добавьте 0, чтобы отобразить второе = "0"+второе; } g2d.clearrect (-xclock, -icklock, 600 600); // Чистый экран var s = час+":"+minute+":"+second+":"+apm; G2D.FillStyle = "Red"; g2d.font = d/4+ "px kaiti"; G2D.FillText (S, -D/1.8, D*1.4); g2d.font = d/4 + "px kaiyi"; // create gradientvar gradient = g2d.createlineargradient (0,0, Canvas.width, 0); gradient.addcolorstop («0», «magenta»); gradient.addcolorstop («0,5», «синий»); gradient.addcolorstop («1.0», «Red»);// заполнен gradientg2d.fillstyle = gradient; g2d.filltext ("Большие данные",-D/2.6, D/2); // Получение второго показания момента создания экземпляра и вычислить дуговое показание второй руки, относительно 0 секунд, var C = Math.pi/30 * Second; // Получите минутное чтение момента создания и вычислите дуговое показание минутной руки, var b = math.pi/30 * минута;/ * Получите час считывания момента создания и вычислите чтение дуги часовой руки, относительно 0 точки, и вычислите дуговую считывание дуги часовой руки. * Степень радиана, что часовая рука, - это почасовая точка (30 градусов в час), плюс значение коррекции количества пройденных минут*/var a = math.pi/180* (30* час + минута/2);/* Система координат переводится (xclock, yclock), так что ось координат становится центром диафрагмы*/dlailface (); Drawneedles (A, B, C); } // Конец кодового блока кода метода Drawtime var i = 0; function pendulum () {// pendulum_bobvar instantangle = новый Массив (64,61,56,49,40,29,16,3, -8, -16, -29, -40, -49, -56, -61, -64,- 64, -64, -61, -56, -49, -40, -29, -16, -8,3,16,29,40,49,56,61,64,64); // массив угла в режиме реального времени в режиме реального времени var c = document.getElementbyId ("mypendulum"); var ctx = c.getContext ("2d"); var alpha = instantAngle [i ++%instantAnge.length]*math.pi/180; ctx.clearrect (-300, -300,900,900); // установить секундную руку на случайный цвет ctx.fillstyle = 'brown'; ctx.fillrect (-3,0,6, D*1,4); ctx.shadowblur = 20; ctx.shadowcolor = "black"; ctx.fillstyle = "blue"; // ctx.fillrect (-d/3,5, d*1,35, d/1,6, d/4.4); ctx.font = "40px kaiyi"; // Создание градиента Gradientvar = ctx.createlinearGradient (0,0, C.Width, 0); gradient.AddcolorStop ("0", "Magenta"); gradient.addcolorstop («0.5», «синий»); с градиентом // ctx.fillstyle = gradient; ctx.fillstyle = "red"; ctx.filltext ("Большие данные",-D/3.2, D*1,55); ctx.shadowblur = 0; ctx.shadowcolor = null; ctx.fillstyle = null; ctx.rotate (-alpha); } function preparation () {locateCoordinate () setInterval ('DrawTime ()', 500); setInterval ('pendulum ()', 200);} </script> <style> #mycanvas {z-index: 3; позиция: абсолютно; слева: 0px; Верх: 0px; } #mypendulum {z-index: 2; позиция: абсолютно; слева: 0px; Top: 0px;}#controlPanel {position: Absolute; Слева: 600px; Верх: 0px; Ширина: 100px; Текст-альбом: Центр; Фонт-семья: "kaiti"; размер шрифта: 20px; шрифт-вес: жирный шрифт; Цвет:#6c0;} </style> </head> <body onload = "preparation ()"> <canvas id = "mycanvas"> <p> Ваши браузердо не поддерживают элемент холма! id = "controlPanel"> <Table> <tr> <td> Control </td> <td> кнопка </td> </tr> <td> <input value = "inlarge" type = "кнопка" onclick = "enlarge ()"> </utturon> </td> <td> <vint value = "type" type = " onclick="reduce()"></button></td></tr> <tr><td><input value="Left" type="button" onclick="westwards()"></button></td><td><input value="right" type="button" onclick="eastwards()"></button></td></tr> <tr><td><input value="upwards" type = "onclick =" upward () "> </button> </td> <td> <input value =" downward "type =" onclick = "downwards ()"> </button> </td> </tr> </table> </div> </body> </html> </td> </tr> </table> </div> </body> </html>Изображение воспроизведения:
Я надеюсь, что эта статья будет полезна для каждого веб -программирования.