Комментарий: часы, реализованные HTML5Canvas, обратитесь к ним
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<title> HTML Clock </title>
</head>
<тело>
<Canvas>
Ваш браузер не поддерживает тег Canvas, и часовая рука не может быть отображена!
</canvas>
<script type = "text/javascript">
// Цвет фона холста
var clockbackgroundcolor = "#abcdef";
// час ручной цвета
var ourpointcolor = "#000";
// толщина часовой руки
var HourpointWidth = 7;
// часовая длина руки
var HourpointLength = 100;
// минутный цвет рук
var minpointcolor = "#000";
// толщина минутной руки
var minpointwidth = 5;
// минутная длина руки
var minpointlength = 150;
// секундный цвет
var secpointcolor = "#f00";
// вторая толщина
var SecpointWidth = 3;
// Длина секундной руки
var SecpointLength = 170;
// Цвет циферблата
var clockpanelcolor = "#abcdef";
// Цвет шкалы набора
var scalecolor = "#000";
// Наберите крупномасштабную ширину 3 6 9 12
var ScaleBigWidth = 9;
// длина крупномасштабного набора
var scalebiglength = 15;
// ширина диска в мелких масштабах
VAR ScaleSmallWidth = 5;
// длина циферблата в мелких масштабах
VAR ScaleSmalllength = 10;
// Центральный цвет
var centercolor = 'red';
// часы холст
var clock = document.getElementbyId ('clock');
clock.style.background = clockbackgroundcolor;
// Среда рисования часового холста (покраска)
var panel = clock.getContext ('2d');
// рисовать линии
/**
*Нарисуйте сегменты линии
*
*
*/
Функциональная натяжка (P, ширина, цвет, Startx, Starty, Endx, Endy, Ran, Cx, Cy) {
// Сохранить входящий артборд, который эквивалентен открытию нового слоя каждый раз, когда вы рисуете
p.save ();
// Установить ширину кисти
p.linewidth = ширина;
// Установить цвет кисти
P.Strokestyle = цвет;
// недавно открыл путь рисования, чтобы избежать помех в предыдущий контент на артборде
p.beginpath ();
P.TransLate (CX, CY);
// вращение
P.Rotate (Ran);
// переместить кисть в начальное положение
P.Moveto (Startx, Starty);
// переместить кисть в конечное положение
P.LineTo (Endx, Endy);
// операция чертежа линии
P.Stroke ();
// Закройте путь рисования, чтобы избежать вмешательства с контентом, нарисованным на артборде позже
p.closepath ();
// накладывайте слой на входящий объект Artboard
P.Restore ();
}
/**
*Нарисуйте горизонтальные линии
*/
Функция Drawhorizontalline (P, ширина, длина, цвет, Startx, Starty, Ran, CX, CY) {
Linkline (P, ширина, цвет, Startx, Starty, Startx+длина, Starty, Ran, CX, CY);
}
/**
*Нарисуйте круги
*/
функция DrawCircle (P, ширина, цвет, центр, центр, r) {
p.save ();
// Установить ширину кисти
p.linewidth = ширина;
// Установить цвет кисти
P.Strokestyle = цвет;
// недавно открыл путь рисования, чтобы избежать помех в предыдущий контент на артборде
p.beginpath ();
// нарисовать круги
P.ARC (Centrex, Centrey, R, 0,360, false);
// операция чертежа линии
P.Stroke ();
// Закройте путь рисования, чтобы избежать вмешательства с контентом, нарисованным на артборде позже
p.closepath ();
// накладывайте слой на входящий объект Artboard
P.Restore ();
}
Функциональная точка натяжения (P, ширина, цвет, центр, центр, r) {
p.save ();
// Установить ширину кисти
p.linewidth = ширина;
// Установить цвет кисти
p.fillstyle = color;
// недавно открыл путь рисования, чтобы избежать помех в предыдущий контент на артборде
p.beginpath ();
// нарисовать круги
P.ARC (Centrex, Centrey, R, 0,360, false);
// операция чертежа линии
p.fill ();
// Закройте путь рисования, чтобы избежать вмешательства с контентом, нарисованным на артборде позже
p.closepath ();
// накладывайте слой на входящий объект Artboard
P.Restore ();
}
Функция DrawScales (P) {
// рисовать мелкие масштаба
для (var i = 0; i <60; i ++) {
Drawhorizontalline (P, ScaleSmallWidth, ScaleSmalllength, ScaleColor, 195-ScaleSmalllength, 0, I*6*Math.pi/180 250,250);
}
// нарисовать крупномасштабные
для (var i = 0; i <12; i ++) {
Drawhorizontalline (p, i%3 == 0? ScaleBigWidth*1,2: ScaleBigWidth, i%3 == 0? ScaleBiglength*1,2: ScaleBiglength, ScaleColor, 195-ScaleBiglength, 0, i*30*Math.pi/180 250,250);
// Вы можете добавить цифровые шкалы
}
}
Функция DrawHourPoint (P, Hour) {
Drawhorizontalline (P, часовая протекания, часовая длина, часовой кожур, -10,0, (час-3)*30*Math.pi/180 250,250);
}
функция DrawMinpoint (p, min) {
Drawhorizontalline (P, MinpointWidth, MinPointLength, MinPointColor, -15,0, (MIN-15)*6*Math.pi/180 250,250);
}
Функция DraitSecpoint (p, sec) {
Drawhorizontalline (P, SecpointWidth, SecPointLength, SecPointColor, -15,0, (SEC-15)*6*Math.PI/180 250,250);
}
функция drawClock () {
Panel.clearrect (0,0,500 500);
panel.filltext ("", 10,20);
panel.filltext ("<a href =" http://www.vevb.com ", 10,40"> ", 10,40 </a>);
var date = new Date ();
var sec = date.getSeconds ();
var min = date.getminutes ();
var our = date.gethours () + min/60;
DrawCircle (панель, 7, «синий», 250 250 200);
DrawScales (панель);
Drawhourpoint (панель, час);
Drawminpoint (панель, мин);
DrawSecpoint (панель, Sec);
натяжка (панель, 1, Centercolor, 250 250,7);
// Drowhorizontalline (панель, 10,10, «красный», 5,0,0,250 250);
}
//drowhorizontalline(panel,7,30,30,0,0,0,0,0,0,0,0,250 250 2550);
DrawClock ();
SetInterval (DrowClock, 1000);
function save () {
var image = clock.todataurl ("Image/png"). Заменить ("Image/png", "Image/Octet-Stream");
location.href = image;
}
</script>
</body>
</html>