Ich habe das Canvas -Element in HTML5 schon einmal gelernt, und um meine Hände zu üben, erkannte ich eine einfache Uhr. Die Uhr selbst ist nicht kompliziert und wird mit Bildern nicht verschönert. Obwohl die Spatz klein ist, werde ich sie unten mit Ihnen teilen:
Demonstrationseffekt:
HTML -Code:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Uhr </title>
<style type = "text/css">
*{{
Rand: 0;
Polsterung: 0;
}
.Leinwand{
Rand-Links: 20px;
Rand: 20px;
Grenze: solide 1px;
}
</style>
</head>
<Body Onload = "main ()">
<canvas class = "canvas" id = "canvasid" width = '500px' height = '400px'> </canvas>
<script type = "text/javaScript" src = "clock.js"> </script>
</body>
</html>
JS -Code:
Die Codekopie lautet wie folgt:
var canvas = {};
Canvas.cxt = document.getElementById ('canvasid'). GetContext ('2d');
Canvas.point = function (x, y) {
this.x = x;
this.y = y;
};
/* Alle Grafiken auf Leinwand löschen*/
Canvas.clearcxt = function () {
var me = this;
var canvas = me.cxt.canvas;
me.cxt.clearrect (0,0, canvas.offsetwidth, canvas.offseteight);
};
/*Uhr*/
Canvas.clock = function () {
var me = canvas,
c = me.cxt,
Radius = 150, /*Radius* /
Skala = 20, /*Skalierungslänge* /
minangle = (1/30)*math.pi,/*Ray von einer Minute*/
Hourangle = (1/6)*Math.pi,/*Ray von einer Stunde*/
HOGHANDLENGENT = Radius/2,/*Stundenhandlänge*/
minhandlength = radius/3*2,/*winzige Handlänge*//
secHandLength = radius/10*9,/*Second Handlänge*/
Center = new me.point (canvas.width/2, canvas.height/2); /*Kreiszentrale*//
/*Zeichnen Sie die Mitte des Kreises (Mitte des Zifferblatts)*/
Funktion DrawCenter () {
C.Save ();
C.Translate (Center.x, Center.Y);
C. fillstyle = 'schwarz';
C.BeginPath ();
C.ARC (0, 0, Radius/20, 0, 2*math.pi);
C. closepath ();
C.Fill ();
C.Stroke ();
C.Restore ();
};
/*Zeichne das Uhrgesicht durch Koordinatentransformation*/
Funktionsnachteilsground () {
C.Save ();
C.Translate (Center.x, Center.Y); /*Übersetzungstransformation*/
/*Skala zeichnen*/
Funktion DrawsCale () {
C.Moveto (Radius - Skala, 0);
C.Lineto (Radius, 0);
};
C.BeginPath ();
C.ARC (0, 0, Radius, 0, 2*math.pi, true);
C. closepath ();
für (var i = 1; i <= 12; i ++) {
Drawscale ();
C.Rotate (Hourangle); /*Rotationstransformation*/
};
/*Zeichenzeit (3,6,9,12)*/
C.Font = "BOLD 30PX Impack"
C. filltext ("3", 110, 10);
C.Filltext ("6", -7, 120);
C. filltext ("9", -120, 10);
C.Filltext ("12", -16, -100);
C.Stroke ();
C.Restore ();
};
/*Zeichnen Sie die Stundenhand (H: Aktuelle Zeit (24-Stunden-System)*//////
this.drawHourhand = function (h) {
H = H === 0? 24: H;
C.Save ();
C.Translate (Center.x, Center.Y);
C.Rotate (3/2*math.pi);
C.Rotate (H*Hourangle);
C.BeginPath ();
C.Moveto (0, 0);
C.LINETO (HOGHANTLENGHT, 0);
C.Stroke ();
C.Restore ();
};
/*Zeichnen Sie Minute Hand (M: aktuelle Minute)*/
this.drawminhand = function (m) {
M = M === 0? 60: M;
C.Save ();
C.Translate (Center.x, Center.Y);
C.Rotate (3/2*math.pi);
C.Rotate (m*minangle);
C.BeginPath ();
C.Moveto (0, 0);
C.Lineto (Minhandlength, 0);
C.Stroke ();
C.Restore ();
};
/*Zeichnen Sie die Sekundenzeiger (s: aktueller Sekunde)*/
this.drawsechand = function (s) {
S = S === 0? 60: S;
C.Save ();
C.Translate (Center.x, Center.Y);
C.Rotate (3/2*math.pi);
C.Rotate (S*minangle);
C.BeginPath ();
C.Moveto (0, 0);
C.Lineto (SecHandLength, 0);
C.Stroke ();
C.Restore ();
};
/*Zeichne die Uhr basierend auf der lokalen Zeit*/
this.drawclock = function () {
var me = this;
Funktion draw () {
var date = new Date ();
Canvas.clearcxt ();
Nachteil ();
DrawCenter ();
me.drawHourhand (Datum.Gethours () + Date.getminutes ()/60);
me.drawminhand (date.getminutes () + date.getSeconds ()/60);
me.drawsechand (date.getSeconds ());
}
ziehen();
setInterval (zeichnen, 1000);
};
};
var main = function () {
var clock = new canvas.clock ();
clock.drawclock ();
};
Einige einfache APIs von Canvas -Elementen sind in den Code beteiligt. Machen Sie einfach eine Pause
Das obige dreht sich alles um diesen Artikel. Ich hoffe, es wird für alle hilfreich sein, Leinwand zu lernen.