Codefreigabe zum Schreiben einer Uhr auf einer Webseite unter Verwendung reiner HTML5_html5-Tutorialfähigkeiten-H5-Tutorial-php.cn

Codefreigabe zum Schreiben einer Uhr auf einer Webseite unter Verwendung reiner HTML5_html5-Tutorialfähigkeiten

WBOY

Freigeben： 2016-05-16 15:46:23

Original

1910 Leute haben es durchsucht

Was Sie wissen müssen:

Das Canvas-Tag ist nur ein Grafikcontainer. Sie müssen ein Skript verwenden, um die Grafiken zu zeichnen. Standardgröße: Breite 300 Pixel, Höhe 150 Pixel;

Die Methode getContext() gibt ein Objekt zurück, das Methoden und Eigenschaften zum Zeichnen auf der Leinwand bereitstellt. ——Holen Sie sich das Kontextobjekt.

getContext("2d") Objekteigenschaften und -methoden, die zum Zeichnen von Text, Linien, Rechtecken, Kreisen usw. auf der Leinwand verwendet werden können.

fillRect(l,t,w,h): Die Standardfarbe ist Schwarz StrokeRect(l,t,w,h): Ein Quadrat mit einem Rand. Standardmäßig ein Pixel schwarzer Rand

Die Methode setInterval() kann eine Funktion aufrufen oder einen Ausdruck entsprechend dem angegebenen Zeitraum (in Millisekunden) berechnen.

beginPath(): Definieren Sie den Beginn des Zeichnens des Pfads, wodurch der aktuelle Punkt auf (0,0) gesetzt wird. Wenn eine Canvas-Umgebung zum ersten Mal erstellt wird, wird die Methode beginPath()

explizit aufgerufen.
closePath(): Zeichenpfad beenden (Startpunkt und Endpunkt verbinden)

Zeichne einen Kreis:
Bogen (x, y, Radius, Startbogen, Endbogen, Drehrichtung)
x, y: Startposition
Die Beziehung zwischen Bogen und Winkel: Bogenmaß = Winkel *Math.PI/180
Rotationsrichtung: im Uhrzeigersinn (Standard: falsch, gegen den Uhrzeigersinn: wahr)

Code:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

>
<html lang="en- USA“>
<Kopf>
<meta charset="UTF- 8">
<Titel>Titel>
<Skript>
var oC = document
var oGC = oC
function drawClock(){
x
200
var y = 200
var r = 150
oGC.clearRect(0,0,oC.width,oC.height);//清空画布
oDate
new
var Ohours = Odate .Gethours (); var 🎜>
var 🎜> 🎜> var var
osenvalue = (-90 osen*6)*math.pi/180; oGC.beginPath();//Start
for(var i=0
;i<60;i ){ //i ist 60, was die 60 kleinen Skalen der Uhr darstellt
oGC.moveTo(x,y); oGC.arc(x,y,r,6*i*Math.PI/180,6*(i 1)*Math.PI/180,false); //Schleife von 6 Grad bis 12 Abschluss
oGC.closePath();
oGC.streich();
oGC.beginPath(); oGC.moveTo(x,y);
oGC.arc(x,y,r*19/20,0,360*(i 1)*Math.PI/180,false);
oGC.closePath();//End
oGC.fill();
🎜>
s ‐ zu GC.be''s-'s t-----oGC.beginPath();
i=0;i<
;i ){ //i ist 12, was die 12 Raster der Uhrskala darstellt
oGC.moveTo(x,y);
oGC. =Angle*Math.PI/180
oGC.closePath();
oGC.streich();
oGC.beginPath(); oGC.moveTo(x,y);
oGC.arc(x,y,r*18/20,360*(i 1)*Math.PI/180,false);
oGC.closePath();
oGC.fill();//Das Wählen ist abgeschlossen
<<>
=
;
oGC.moveTo(x,y);
OGC.LineWidth =
3 ;
oGC.beginPath();//Mit dem Zeichnen des Minutenzeigers beginnen
oGC.moveTo(x,y);
oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);//Legen Sie die Größe und das Bogenmaß des Minutenzeigers fest
oGC.lineWidth = 1;//Stellen Sie die Sekundenzeigerbreite ein
setInterval(drawClock,1000);//Stellen Sie den Timer ein und lassen Sie die Uhr laufen
drawClock();
};
Skript>

Kopf>
<Körper>
<Leinwand id = "ch1" Breite = "400px" Höhe = "400px">Leinwand>
Körper>
html>

Klicken Sie auf das Ergebnis unten, um die Demo anzusehen:
http://jsfiddle.net/eh02450b/2/