Comentário: O relógio implementado por html5canvas, por favor, consulte
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> HTML Clock </ititle>
</head>
<Body>
<Canvas>
Seu navegador não suporta a tag de tela e a mão de hora não pode ser exibida!
</canvas>
<script type = "text/javascript">
// Cor do fundo da tela
var clockbackgroundColor = "#ABCDEF";
// Cor da mão da hora
var hourPointColor = "#000";
// a espessura do ponteiro
var hourPointWidth = 7;
// comprimento da mão de hora
var hourpointLength = 100;
// cor de mão minuto
var minPointColor = "#000";
// a espessura do lado minuto
var minPointWidth = 5;
// comprimento da mão minuto
var minPointLength = 150;
// cor de segunda mão
var secpointColor = "#f00";
// Segunda espessura
var secpointWidth = 3;
// comprimento da segunda mão
var secpointLength = 170;
// Dial Color
var clockPanelColor = "#ABCDEF";
// Dial Scale Color
var scalecolor = "#000";
// Disque largura em larga escala 3 6 9 12
var scaleBigWidth = 9;
// comprimento da larga escala do mostrador
var scaleBigLength = 15;
// a largura do mostrador em pequena escala
var scalesmallwidth = 5;
// o comprimento do mostrador em pequena escala
var scalesmallLength = 10;
// cor central
var Centercolor = 'vermelho';
// Canvas do relógio
var clock = document.getElementById ('relógio');
clock.style.background = clockbackgroundColor;
// O ambiente de desenho da lona da mão (prancha)
VAR painel = relógio.getContext ('2d');
// Desenhe linhas
/**
*Desenhe segmentos de linha
*
*
*/
Função DrawLine (P, Largura, Cor, Startx, Starty, Endx, Endy, Ran, CX, Cy) {
// Salve a prancha de arte, o que equivale a abrir uma nova camada toda vez que você desenha
P.Save ();
// Defina a largura do pincel
P.LineWidth = Width;
// Defina a cor do pincel
p.strokestyle = cor;
// recém -aberto o caminho de desenho para evitar interferências com o conteúdo anterior na prancheta
P.BeginPath ();
P.Translate (CX, CY);
//Rotação
p.rotate (Ran);
// mova o pincel para a posição inicial
p.moveto (startx, starty);
// mova o pincel para a posição final
p.lineto (endx, endy);
// Operação de desenho de linha
p.stroke ();
// Feche o caminho de desenho para evitar a interferência com o conteúdo desenhado na prancheta posteriormente
p.closePath ();
// sobrepor a camada no objeto de entrada de arte que entra
P.Restore ();
}
/**
*Desenhe linhas horizontais
*/
Função Deflorizontalline (P, Largura, Comprimento, Cor, Startx, Starty, Ran, CX, Cy) {
DrawLine (P, Largura, Cor, StartX, Starty, StartX+Comprimento, Starty, Ran, CX, Cy);
}
/**
*Desenhe círculos
*/
função drawcircle (p, largura, cor, centrex, centrey, r) {
P.Save ();
// Defina a largura do pincel
P.LineWidth = Width;
// Defina a cor do pincel
p.strokestyle = cor;
// recém -aberto o caminho de desenho para evitar interferências com o conteúdo anterior na prancheta
P.BeginPath ();
// Desenhe círculos
P.Arc (Centrex, Centrey, R, 0.360, False);
// Operação de desenho de linha
p.stroke ();
// Feche o caminho de desenho para evitar a interferência com o conteúdo desenhado na prancheta posteriormente
p.closePath ();
// sobrepor a camada no objeto de entrada de arte que entra
P.Restore ();
}
função drawpoint (p, largura, cor, centrex, centrey, r) {
P.Save ();
// Defina a largura do pincel
P.LineWidth = Width;
// Defina a cor do pincel
p.fillstyle = cor;
// recém -aberto o caminho de desenho para evitar interferências com o conteúdo anterior na prancheta
P.BeginPath ();
// Desenhe círculos
P.Arc (Centrex, Centrey, R, 0.360, False);
// Operação de desenho de linha
p.fill ();
// Feche o caminho de desenho para evitar a interferência com o conteúdo desenhado na prancheta posteriormente
p.closePath ();
// sobrepor a camada no objeto de entrada de arte que entra
P.Restore ();
}
função drawscales (p) {
// Desenhe em pequena escala
for (var i = 0; i <60; i ++) {
Definência (p, scalesmallwidth, scalesmalllength, scalecolor, 195-scalesmalllength, 0, i*6*math.pi/180.250.250);
}
// Desenhe uma grande escala
for (var i = 0; i <12; i ++) {
Devúria (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);
// você pode adicionar escalas digitais
}
}
função drawhourpoint (p, hora) {
Definência (P, HourPointWidth, HourPointLength, HourPointColor, -10,0, (Hour-3)*30*Math.PI/180.250,250);
}
função drawinpoint (p, min) {
Definência (P, MinPointWidth, MinPointLength, MinPointColor, -15,0, (min-15)*6*Math.Pi/180,250,250);
}
função drawSecpoint (p, s) {
Draworizontalline (P, SecPointWidth, SecPointLength, SecPointColor, -15,0, (Sec-15)*6*Math.pi/180.250,250);
}
função drawclock () {
painel.clearrect (0,0,500.500);
painel.FillText ("", 10,20);
painel.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 hour = date.gethours () + min/60;
drawcircle (painel, 7, 'azul', 250.250.200);
Drawscales (painel);
drawhourpoint (painel, hora);
drawminpoint (painel, min);
drawSecPoint (painel, segundo);
drawpoint (painel, 1, centrcolor, 250,250,7);
// drowhorizontalline (painel, 10,10, 'vermelho',-5,0,0,250,250);
}
//drowhorizontalline(Panel,7,30,'#f00',0,0,math.pi.250.250);
drawclock ();
setInterval (Drowclock, 1000);
função save () {
var imagem = clock.todataurl ("imagem/png"). substituir ("imagem/png", "imagem/stream de octeto");
location.href = imagem;
}
</script>
</body>
</html>