Heim > Web-Frontend > H5-Tutorial > Codefreigabe zum Schreiben einer Uhr auf einer Webseite unter Verwendung reiner HTML5_html5-Tutorialfähigkeiten

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

WBOY
Freigeben: 2016-05-16 15:46:23
Original
1923 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
  1. >  
  2. <html lang="en- USA“>  
  3. <Kopf>  
  4.         <meta charset="UTF- 8">  
  5.         <Titel>Titel>  
  6.         <Skript>  
  7.                                          var oC = document
  8. .getElementById('ch1');   
  9.                         var oGC = oC
  10. .getContext('2d');   
  11.                            function drawClock(){   
  12.                                 var 
  13. x
  14.  = 
  15. 200
  16. ;   //指定坐标   
  17.                                 var y = 200
  18. ;   
  19.                                 var r = 150
  20. ;  //指定钟表半径   
  21.                                    oGC.clearRect(0,0,oC.width,oC.height);//清空画布   
  22.   
  23.                                var 
  24. oDate
  25.  = 
  26. new
  27.  Date();      //创建日期对象   
  28. var Ohours = Odate .Gethours (); var 🎜>
  29. var 🎜>                                                                                                                                                                                                                                                                  🎜>                           var var
  30. osenvalue = (-90 osen*6)*math.pi/180; oGC.beginPath();//Start
  31. for(var i=0
  32. ;i<60;i ){           //i ist 60, was die 60 kleinen Skalen der Uhr darstellt
  33. 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
  34.                                                                 
  35. oGC.closePath();
  36. oGC.streich();
  37.                                                                                                                                                                                                              oGC.beginPath(); oGC.moveTo(x,y);
  38. oGC.arc(x,y,r*19/20,0,360*(i 1)*Math.PI/180,false);
  39. oGC.closePath();//End
  40. oGC.fill();
  41.                                                                                                                                                                                                                       🎜>
  42.                                                                                                                                                                                       s ‐ zu GC.be''s-'s t-----oGC.beginPath();                    
  43. for(
  44. i=0;i<
  45. 12
  46. ;i ){                   //i ist 12, was die 12 Raster der Uhrskala darstellt
  47. oGC.moveTo(x,y);
  48.                                                                                                                                                        oGC. =Angle*Math.PI/180                                                                 
  49. oGC.closePath();
  50. oGC.streich();
  51.                                                                                                                                                                                                                                                                        oGC.beginPath(); oGC.moveTo(x,y);
  52.                                   oGC.arc(x,y,r*18/20,360*(i 1)*Math.PI/180,false);                    
  53. oGC.closePath();
  54. oGC.fill();//Das Wählen ist abgeschlossen
  55. <<>
  56. OGC.LineWidth
  57. =
  58. 5
  59. ;
  60. oGC.beginPath();//Mit dem Zeichnen des Stundenzeigers beginnen
  61. oGC.moveTo(x,y);
  62. oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);//Legen Sie die Größe und das Bogenmaß des Stundenzeigers fest
  63. oGC.closePath();
  64. oGC.streich();
  65. <<>
  66. OGC.LineWidth =
  67. 3 ;
  68. oGC.beginPath();//Mit dem Zeichnen des Minutenzeigers beginnen
  69. oGC.moveTo(x,y);
  70. oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);//Legen Sie die Größe und das Bogenmaß des Minutenzeigers fest
  71. oGC.closePath();
  72. oGC.streich();
  73.  
  74. oGC.lineWidth = 1;//Stellen Sie die Sekundenzeigerbreite ein
  75. oGC.beginPath();//Beginnen Sie mit dem Zeichnen des Sekundenzeigers
  76. oGC.moveTo(x,y);
  77. oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);//Stellen Sie die Größe und den Bogen des Sekundenzeigers ein
  78. oGC.closePath();
  79. oGC.streich();
  80.                                                                    
  81. setInterval(drawClock,1000);//Stellen Sie den Timer ein und lassen Sie die Uhr laufen
  82. drawClock();
  83. };
  84. Skript>
  85. Kopf>
  86. <Körper>
  87.  <Leinwand id = "ch1" Breite = "400px" Höhe = "400px">Leinwand> 
  88. Körper>
  89. html>

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage