suchen

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
WBOYOriginal
2016-05-16 15:46:231916Durchsuche

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

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

Stellungnahme：
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
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung des Manifest-Cache in HTML5_html5-Tutorial-FähigkeitenNächster Artikel：Detaillierte Erläuterung der Verwendung des Manifest-Cache in HTML5_html5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen