Kommentar: Die von HTML5CANVAS implementierte Uhr finden Sie bitte
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> html clock </title>
</head>
<body>
<Canvas>
Ihr Browser unterstützt das Canvas -Tag nicht und die Stundenhand kann nicht angezeigt werden!
</canvas>
<script type = "text/javaScript">
// Canvas -Hintergrundfarbe
var clockbackgroundcolor = "#abcdef";
// Stunde Handfarbe
var stoundpointcolor = "#000";
// die Dicke der Stundenhand
var Hourpointwidth = 7;
// Stunde Handlänge
var HourpointLength = 100;
// Minute Handfarbe
var minpointcolor = "#000";
// die Dicke der winzigen Hand
var minpointwidth = 5;
// Minute Handlänge
var minpointLength = 150;
// Gebrauchsfarbe
var secpointcolor = "#f00";
// zweite Dicke
var secPointwidth = 3;
// zweite Handlänge
var secPointLength = 170;
// Farbe wählen
var clockPanelcolor = "#abcdef";
// Skalierungsfarbe wählen
var scalecolor = "#000";
// Wählvariante Breite 3 6 9 12
var scaleBigwidth = 9;
// Länge des großen Maßstabs des Zifferblatts
var scasteBigLength = 15;
// die Breite des Zifferblatts kleiner Maßstab
var scalesmallwidth = 5;
// Die Länge des Zifferblatts kleiner Maßstab
var scalesmallLength = 10;
// Center Color
var centerColor = 'rot';
// Uhr Canvas
var clock = document.getElementById ('clock');
Clock.Style.background = clockbackgroundColor;
// Die Zeichenumgebung der Stunde Hand -Leinwand (Paintboard)
var panel = clock.getContext ('2d');
// Linien zeichnen
/**
*Zeichnen Sie Liniensegmente
*
*
*/
Funktion DRAGLINE (P, Breite, Farbe, Startx, Starty, Endx, Endy, Ran, CX, Cy) {
// Speichern Sie die eingehende Kunstboote, die dem Öffnen einer neuen Ebene jedes Mal entspricht, wenn Sie zeichnen
P.Save ();
// Stellen Sie die Bürstenbreite ein
P. linewidth = width;
// Stellen Sie die Pinselfarbe ein
P.strokestyle = Farbe;
// hat den Zeichnungsweg neu geöffnet, um eine Störung des vorherigen Inhalts in der ARTboard zu vermeiden
P.BeginPath ();
P.Translate (CX, Cy);
//Drehung
P.TROTATE (RAN);
// Bewegen Sie die Bürste in die Startposition
p.moveto (startx, starty);
// Bewegen Sie die Bürste in die Endposition
P.Lineto (Endx, Endy);
// Zeilenbedienung
P.Stroke ();
// Schließen Sie den Zeichnungsweg, um eine Störung des Inhalts, der später auf der Kunstkarte gezogen wurde, zu vermeiden
p.closepath ();
// Überlagern Sie die Ebene auf dem eingehenden ARTboard -Objekt
P.Restore ();
}
/**
*Horizontale Linien zeichnen
*/
Funktion Drawhorizontalline (P, Breite, Länge, Farbe, Startx, Starty, Ran, Cx, Cy) {
Drawline (P, Breite, Farbe, Start, Start, Startx+Länge, Starty, Ran, CX, Cy);
}
/**
*Kreise zeichnen
*/
Funktion Drawcircle (P, Breite, Farbe, Centrex, Centrey, R) {
P.Save ();
// Stellen Sie die Bürstenbreite ein
P. linewidth = width;
// Stellen Sie die Pinselfarbe ein
P.strokestyle = Farbe;
// hat den Zeichnungsweg neu geöffnet, um eine Störung des vorherigen Inhalts in der ARTboard zu vermeiden
P.BeginPath ();
// Kreise zeichnen
P.ARC (Centrex, Centrey, R, 0,360, Falsch);
// Zeilenbedienung
P.Stroke ();
// Schließen Sie den Zeichnungsweg, um eine Störung des Inhalts, der später auf der Kunstkarte gezogen wurde, zu vermeiden
p.closepath ();
// Überlagern Sie die Ebene auf dem eingehenden ARTboard -Objekt
P.Restore ();
}
Funktion Drawpoint (P, Breite, Farbe, Centrex, Centrey, R) {
P.Save ();
// Stellen Sie die Bürstenbreite ein
P. linewidth = width;
// Stellen Sie die Pinselfarbe ein
P.Fillstyle = Farbe;
// hat den Zeichnungsweg neu geöffnet, um eine Störung des vorherigen Inhalts in der ARTboard zu vermeiden
P.BeginPath ();
// Kreise zeichnen
P.ARC (Centrex, Centrey, R, 0,360, Falsch);
// Zeilenbedienung
P.Fill ();
// Schließen Sie den Zeichnungsweg, um eine Störung des Inhalts, der später auf der Kunstkarte gezogen wurde, zu vermeiden
p.closepath ();
// Überlagern Sie die Ebene auf dem eingehenden ARTboard -Objekt
P.Restore ();
}
Funktion Drawscales (p) {
// Kleinwaage zeichnen
für (var i = 0; i <60; i ++) {
Drawhorizontalline (P, scalesmallwidth, scalesmallLength, scalecolor, 195-scalesmallLength, 0, i*6*math.pi/180,250,250);
}
// zeichne einen großen Maßstab
für (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);
// Sie können digitale Skalen hinzufügen
}
}
Funktion DrawHourpoint (p, Stunde) {
Drawhorizontalline (P, HourPointwidth, HourPointLength, HourPointColor, -10,0, (Hour-3)*30*Math.pi/180,250,250);
}
Funktion Drawminpoint (p, min) {
Drawhorizontalline (P, Minointwidth, MinointLength, MinpointColor, -15,0, (min-15)*6*Math.pi/180,250,250);
}
Funktion DrawSeCpoint (p, Sec) {
Drawhorizontalline (P, SecPointwidth, SecPointLength, SecPointColor, -15,0, (Sec-15)*6*Math.pi/180,250,250);
}
Funktion 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 hour = Datum.Gethours () + min/60;
Drawcircle (Panel, 7, 'Blue', 250.250.200);
DrawsCales (Panel);
DrawHourpoint (Panel, Stunde);
Drawminpoint (Panel, min);
DrawSecpoint (Panel, Sec);
Drawpoint (Panel, 1, CenterColor, 250,250,7);
// Drowhorizontalline (Panel, 10,10, 'rot',-5,0,0,250,250);
}
/
DrawClock ();
setInterval (Drowclock, 1000);
Funktion Save () {
var image = clock.todataurl ("Bild/png"). Ersetzen ("Bild/PNG", "Bild/Oktettstrom");
location.href = Bild;
}
</script>
</body>
</html>