Commentaire: L'horloge implémentée par HTML5CANVAS, veuillez y consulter
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> HTML Clock </Title>
</ head>
<body>
<lebvas>
Votre navigateur ne prend pas en charge la balise Canvas et la main d'Hour ne peut pas être affichée!
</ canvas>
<script type = "text / javascript">
// Couleur d'arrière-plan de toile
var cvergybackgroundcolor = "#abcdef";
// couleur de main d'heure
var hourpointcolor = "# 000";
// l'épaisseur de la main de l'heure
var hourpointwidth = 7;
// longueur de main d'heure
var hourpointLength = 100;
// Couleur des mains des minutes
var minPointColor = "# 000";
// l'épaisseur de la main des minutes
var minpointwidth = 5;
// longueur de main
var minpointLength = 150;
// couleur d'occasion
var secpointColor = "# f00";
// deuxième épaisseur
var secpointwidth = 3;
// longueur de seconde main
var SecpointLength = 170;
// Cadrer la couleur
var horlogepanelcolor = "#abcdef";
// Calogne de la couleur de l'échelle
var scalecolor = "# 000";
// compose la largeur à grande échelle 3 6 9 12
var ScaleBigWidth = 9;
// longueur de la grande échelle du cadran
var ScaleBigLength = 15;
// La largeur du cadran à petite échelle
var ScalemallWidth = 5;
// la longueur du cadran à petite échelle
var ScaleSmallLength = 10;
// Couleur centrale
var centercolor = 'red';
// toile d'horloge
var horloge = document.getElementById ('horloge');
Clock.style.background = clinetbackgroundColor;
// L'environnement de dessin de la toile à main de l'heure (Paintboard)
var panneau = horloge.getContext ('2d');
// dessine des lignes
/ **
* Dessiner des segments de ligne
*
*
* /
Fonction Drawline (p, largeur, couleur, startx, starty, endx, endy, ran, cx, cy) {
// Enregistrez le tableau d'artisanat entrant, ce qui équivaut à l'ouverture d'un nouveau calque à chaque fois que vous dessinez
p.save ();
// Définit la largeur du pinceau
P.LineWidth = largeur;
// Réglez la couleur du pinceau
p.strokestyle = couleur;
// a nouvellement ouvert le chemin de dessin pour éviter les interférences avec le contenu précédent sur le tableau artistique
P.BeginPath ();
P.Translate (CX, CY);
//Rotation
P.Rotate (Ran);
// déplace le pinceau vers la position de départ
p.moveto (startx, starty);
// déplace le pinceau vers la position finale
P.lineto (endx, endy);
// opération de dessin de ligne
P.stroke ();
// Fermez le chemin de dessin pour éviter les interférences avec le contenu dessiné sur le plancher plus tard
P.ClosePath ();
// superpose le calque sur l'objet art -board entrant
P.Restore ();
}
/ **
* Tracer les lignes horizontales
* /
Fonction Drawhorizontalline (P, largeur, longueur, couleur, startx, starty, ran, cx, cy) {
Drawline (P, largeur, couleur, startx, starty, startx + longueur, starty, ran, cx, cy);
}
/ **
* Dessiner des cercles
* /
Fonction DrawCircle (P, largeur, couleur, centrex, centrey, r) {
p.save ();
// Définit la largeur du pinceau
P.LineWidth = largeur;
// Réglez la couleur du pinceau
p.strokestyle = couleur;
// a nouvellement ouvert le chemin de dessin pour éviter les interférences avec le contenu précédent sur le tableau artistique
P.BeginPath ();
// dessiner des cercles
P.ARC (Centrex, Centrey, R, 0,360, False);
// opération de dessin de ligne
P.stroke ();
// Fermez le chemin de dessin pour éviter les interférences avec le contenu dessiné sur le plancher plus tard
P.ClosePath ();
// superpose le calque sur l'objet art -board entrant
P.Restore ();
}
Fonction Drawpoint (P, largeur, couleur, centrex, centrey, r) {
p.save ();
// Définit la largeur du pinceau
P.LineWidth = largeur;
// Réglez la couleur du pinceau
p.fillStyle = couleur;
// a nouvellement ouvert le chemin de dessin pour éviter les interférences avec le contenu précédent sur le tableau artistique
P.BeginPath ();
// dessiner des cercles
P.ARC (Centrex, Centrey, R, 0,360, False);
// opération de dessin de ligne
p.fill ();
// Fermez le chemin de dessin pour éviter les interférences avec le contenu dessiné sur le plancher plus tard
P.ClosePath ();
// superpose le calque sur l'objet art -board entrant
P.Restore ();
}
Fonction Drawscales (P) {
// dessiner à petite échelle
pour (var i = 0; i <60; i ++) {
Drawhorizontalline (P, Scalemallwidth, ScalemallLength, ScaleColor, 195-ScalesmallLength, 0, i * 6 * Math.pi / 180,250,250);
}
// dessine une grande échelle
pour (var i = 0; i <12; i ++) {
Drawhorizontalline (P, I% 3 == 0? ScaleBigWidth * 1.2: ScaleBigWidth, i% 3 == 0? ScaleBigLength * 1.2: ScaleBigLength, ScaleColor, 195-SCALABIGLENGTH, 0, i * 30 * MATH.PI / 180,250,250);
// Vous pouvez ajouter des échelles numériques
}
}
Fonction DrawhourPoint (P, Hour) {
Drawhorizontalline (P, hourpointwidth, hourpointLength, hourpointcolor, -10,0, (hour-3) * 30 * math.pi / 180,250,250);
}
fonction drawminpoint (p, min) {
Drawhorizontalline (P, MinpointWidth, MinpointLength, MinPointColor, -15,0, (Min-15) * 6 * Math.PI / 180,250,250);
}
fonction drawsecpoint (p, sec) {
Drawhorizontalline (P, SecPointWidth, SecpointLength, secpointColor, -15,0, (Sec-15) * 6 * Math.pi / 180,250,250);
}
fonction drawclock () {
PANNEL.CLEARRRECT (0,0,500,500);
PANNEL.FillText ("", 10,20);
PANNEL.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 (panneau, 7, «bleu», 250 250,200);
DrawScales (panneau);
Point de tirage (panneau, heure);
DrawMinpoint (panneau, min);
DrawSecpoint (panneau, sec);
Point de tirage (panneau, 1, Centercolor, 250 250,7);
// Drowhorizontalline (panneau, 10,10, «rouge», - 5,0,0,250,250);
}
//drowhorizontalline(panel,7,30 ,'#f00',0,0,math.pi,250,250);
drawClock ();
setInterval (drowClock, 1000);
fonction sauve () {
var image = horloge.todataurl ("image / png"). remplacer ("image / png", "image / octtet-stream");
location.href = image;
}
</cript>
</docy>
</html>