简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Partage de code pour écrire une horloge sur une page Web en utilisant les compétences du didacticiel HTML5_html5 pur

Partage de code pour écrire une horloge sur une page Web en utilisant les compétences du didacticiel HTML5_html5 pur

WBOY
WBOYoriginal
2016-05-16 15:46:231904parcourir

Ce que vous devez savoir :

La balise canvas n'est qu'un conteneur graphique, vous devez utiliser un script pour dessiner les graphiques. Taille par défaut : largeur 300px, hauteur 150px ;

La méthode getContext() renvoie un objet qui fournit des méthodes et des propriétés pour dessiner sur le canevas. ——Récupérez l'objet contextuel.

propriétés et méthodes des objets getContext("2d"), qui peuvent être utilisées pour dessiner du texte, des lignes, des rectangles, des cercles, etc. sur le canevas.

fillRect(l,t,w,h) : La couleur par défaut est le noir. StrokeRect(l,t,w,h) : Un carré avec une bordure. Bordure noire par défaut d'un pixel

La méthode setInterval() peut appeler une fonction ou calculer une expression selon la période spécifiée (en millisecondes).

beginPath() : définit le début du tracé du chemin, qui définit le point actuel sur (0,0). Lorsqu'un environnement canevas est créé pour la première fois, la méthode startPath()

est appelée explicitement.
closePath() : Fin du tracé du chemin (connecter le point de départ et le point final)

Tracez un cercle :
arc (x, y, rayon, arc de départ, arc de fin, sens de rotation)
x, y : position de départ
La relation entre l'arc et l'angle : Radians = angle *Math.PI/180
Sens de rotation : dans le sens des aiguilles d'une montre (par défaut : faux, dans le sens inverse des aiguilles d'une montre : vrai)

Code :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >  
  2. <html lang="fr- États-Unis">  
  3. <tête>  
  4.         <méta charset="UTF- 8">  
  5.         <titre>titre>  
  6.         <script>  
  7.                 window.onload = fonction(){   
  8.                         var oC = document.getElementById('ch1');   
  9.                         var oGC = oC.getContext('2d');   
  10.   
  11.                         fonction drawClock(){   
  12.                                  var x = 200;   //指定坐标   
  13.                                  var y = 200;   
  14.                                  var r = 150;  //指定钟表半径   
  15.   
  16.                                 oGC.clearRect(0,0,oC.width,oC.height);//清空画布   
  17.   
  18.                                  var oDate = nouveau Date();      //创建日期对象   
  19. var Ohours = Odate .Gethours ( //); var🎜>
  20. var🎜>                                                                                                                                                                                                                                                                                      🎜>                           var var
  21. osenvalue = (-90 osen*6)*math.pi/180 oGC.beginPath();//Démarrer
  23. pour(var i=
  24. 0;i<60
  25. ;i ){           //i vaut 60, ce qui représente les 60 petites échelles de l'horloge oGC.moveTo(x,y);
  26.                                             oGC.arc(x,y,r,6*i*Math.PI/180,6*(i 1)*Math.PI/180,false); Diplôme
  27.                                                                   
  28. oGC.closePath();
  29. oGC.AVC();
  31.                                                                                                                                                                                                                              oGC.beginPath(); oGC.moveTo(x,y);
  32. oGC.arc(x,y,r*19/20,0,360*(i 1)*Math.PI/180,false);
  33. oGC.closePath();//Fin
  34. oGC.fill();
  36.                                                                                                                                                                                                                                            🎜>
  37.                                                                                                                                                                                           ' s          s ‐ à GC.be''s-'s t-----oGC.beginPath();                    
    39. pour(
  39. i=0;i<
    40. 12
  40. ;i ){                    //i vaut 12, ce qui représente les 12 grilles de l'échelle de l'horloge
  41. oGC.moveTo(x,y);
  42.                                                                                                                                                               oGC =Angle*Math.PI/180                                                                   
  43. oGC.closePath();
  44. oGC.AVC();
  46.                                                                                                                                                                                                                                                                                            oGC.beginPath(); oGC.moveTo(x,y);
  47.                                    oGC.arc(x,y,r*18/20,360*(i 1)*Math.PI/180,false);                      
  48. oGC.closePath();
  49. oGC.fill();//Le cadran est terminé
  51. <<>
    52. OGC.LineWidth
  52. =
    53. 5
  53. ;
    54. oGC.beginPath();//Commencez à dessiner l'aiguille des heures
  54. oGC.moveTo(x,y);
    55. oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);//Définir la taille de l'aiguille des heures et le radian
    56. oGC.closePath();
    57. oGC.AVC();
    59. <<>
  59. OGC.LineWidth =
  60. 3 ;
  61. oGC.beginPath();//Commencez à dessiner l'aiguille des minutes
  62. oGC.moveTo(x,y);
  64. oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);//Définir la taille de l'aiguille des minutes et le radian
    65. oGC.closePath();
    66. oGC.AVC();
    68.  
  68. oGC.lineWidth = 1;//Définir la largeur de la trotteuse
    69. oGC.beginPath();//Commencer à dessiner la trotteuse
    70. oGC.moveTo(x,y);
    72. oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);//Définir la taille et l'arc de la trotteuse
    73. oGC.closePath();
    74. oGC.AVC();
    75.                                                                    
  75. setInterval(drawClock,1000);//Réglez la minuterie et laissez l'horloge fonctionner
  76. drawClock();
  77. };
  78. script>
  79. tête>
  80. <corps>
  81.  <toile id = "ch1" largeur = "400px" hauteur = "400px">toile> 
  82. corps>
  83. html>

Cliquez sur le résultat ci-dessous pour voir la démo :
http://jsfiddle.net/eh02450b/2/

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de l'utilisation du cache de manifeste dans les compétences du didacticiel HTML5_html5Article suivant：Explication détaillée de l'utilisation du cache de manifeste dans les compétences du didacticiel HTML5_html5

Articles Liés

Voir plus