Comentario: El reloj implementado por html5canvas, consultelo
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<title> HTML Reloj </title>
</ablo>
<Body>
<Canvas>
Su navegador no admite la etiqueta de lienzo, ¡y la mano de la hora no se puede mostrar!
</able>
<script type = "text/javaScript">
// Color de fondo de lienzo
var clockbackgroundcolor = "#abcdef";
// Color de la mano de la hora
var sourpointColor = "#000";
// El grosor de la mano de la hora
VAR HourpointWidth = 7;
// Longitud de la mano de la mano
var sourpointLength = 100;
// Color de la mano de minuto
var minPointColor = "#000";
// El grosor de la mano del minuto
var minpointwidth = 5;
// longitud de la mano de minuto
var minPointLength = 150;
// color de segunda mano
var SecPointColor = "#f00";
// segundo grosor
var SecPointWidth = 3;
// Longitud de segunda mano
var SecPointLength = 170;
// Color de marcación
var clockpanelColor = "#abcdef";
// color de escala de marcado
var scaleColor = "#000";
// Marcar ancho a gran escala 3 6 9 12
VAR SCALEBIGWIDTH = 9;
// Longitud de la gran escala del dial
var escalaBigLength = 15;
// El ancho del dial pequeño escala
var scalesmallwidth = 5;
// La longitud del dial pequeña escala
var scalesmallLength = 10;
// color central
var centrocolor = 'rojo';
// lienzo de reloj
var clock = document.getElementById ('reloj');
clock.style.background = clockbackgroundcolor;
// El entorno de dibujo del lienzo de la mano (pintura)
var panel = clock.getContext ('2d');
// dibujar líneas
/**
*Dibujar segmentos de línea
*
*
*/
Funcion Drawline (P, Ancho, Color, StartX, Starty, Endx, Endy, Ran, CX, CY) {
// Guardar la tabla de arte entrante, que es equivalente a abrir una nueva capa cada vez que dibuja
P.save ();
// Coloque el ancho del cepillo
P.linewidth = ancho;
// Coloque el color del pincel
P.Strokestyle = color;
// recientemente abrió la ruta de dibujo para evitar la interferencia con el contenido anterior en el Artboard
p.beginpath ();
P.Translate (CX, CY);
//Rotación
P.Rotate (Ran);
// mover el pincel a la posición de inicio
p.moveto (startx, starty);
// mover el cepillo a la posición final
P.Lineto (Endx, Endy);
// operación de dibujo de línea
p.stroke ();
// Cierre la ruta de dibujo para evitar la interferencia con el contenido dibujado en la tabla de arte más tarde
p.cloSepath ();
// Superponga la capa en el objeto de tablero de arte entrante
p.restore ();
}
/**
*Dibujar líneas horizontales
*/
function shorizontalline (p, ancho, longitud, color, startx, starty, ran, cx, cy) {
línea de dibujo (p, ancho, color, startx, starty, startx+longitud, starty, ran, cx, cy);
}
/**
*Dibujar círculos
*/
Función DrawCircle (P, ancho, color, Centrex, Centrey, R) {
P.save ();
// Coloque el ancho del cepillo
P.linewidth = ancho;
// Coloque el color del pincel
P.Strokestyle = color;
// recientemente abrió la ruta de dibujo para evitar la interferencia con el contenido anterior en el Artboard
p.beginpath ();
// dibujar círculos
P.ARC (Centrex, Centro, R, 0,360, Falso);
// operación de dibujo de línea
p.stroke ();
// Cierre la ruta de dibujo para evitar la interferencia con el contenido dibujado en la tabla de arte más tarde
p.cloSepath ();
// Superponga la capa en el objeto de tablero de arte entrante
p.restore ();
}
Función RayaPoint (P, ancho, color, Centrex, Centrey, R) {
P.save ();
// Coloque el ancho del cepillo
P.linewidth = ancho;
// Coloque el color del pincel
P.FillStyle = color;
// recientemente abrió la ruta de dibujo para evitar la interferencia con el contenido anterior en el Artboard
p.beginpath ();
// dibujar círculos
P.ARC (Centrex, Centro, R, 0,360, Falso);
// operación de dibujo de línea
P.Fill ();
// Cierre la ruta de dibujo para evitar la interferencia con el contenido dibujado en la tabla de arte más tarde
p.cloSepath ();
// Superponga la capa en el objeto de tablero de arte entrante
p.restore ();
}
función DrawScales (P) {
// dibujar a pequeña escala
para (var i = 0; i <60; i ++) {
Drawhorizontalline (p, scalesmallwidth, scalesmalllength, scalecolor, 195-scalesmalllength, 0, i*6*math.pi/180,250,250);
}
// dibujar una gran escala
para (var i = 0; i <12; i ++) {
Drawhorizontalline (p, i%3 == 0?
// Puede agregar escamas digitales
}
}
function drawHourpoint (p, hora) {
Drawhorizontalline (P, HourpointWidth, HourpointLength, HourpointColor, -10,0, (Hora-3)*30*Math.pi/180,250,250);
}
function Drawminpoint (P, Min) {
Drawhorizontalline (P, MinPointWidth, MinPointLength, MinPointColor, -15,0, (min-15)*6*Math.Pi/180,250,250);
}
function DrawSecPoint (P, Sec) {
Drawhorizontalline (P, SecPointWidth, SecPointLength, SecPointColor, -15,0, (Sec-15)*6*Math.Pi/180,250,250);
}
function drawClock () {
panel.clarrect (0,0,500,500);
panel.FillText ("", 10,20);
panel.fillText ("<a href =" http://www.vevb.com ", 10,40"> ", 10,40 </a>);
var fecha = nueva fecha ();
var sec = date.getSeconds ();
var min = date.getMinutes ();
var hora = date.gethours () + min/60;
Drawcircle (panel, 7, 'azul', 250,250,200);
DrawScales (panel);
DrawHourpoint (panel, hora);
Drawminpoint (panel, min);
DrawSecPoint (panel, sec);
punto de desplazamiento (panel, 1, centrocolor, 250,250,7);
// drowhorizontalline (panel, 10,10, 'rojo',-5,0,0,250,250);
}
//drowhorizontalline(panel,7,30,'#f00',0,0,0,math.pi,250,250);
DrawClock ();
setInterval (DrowClock, 1000);
function save () {
var image = clock.todataurl ("Image/png"). Reemplazar ("Image/PNG", "Image/Octet-stream");
ubicación.href = imagen;
}
</script>
</body>
</html>