cari

Rumah >hujung hadapan web >Tutorial H5 >Perkongsian kod untuk menulis jam pada halaman web menggunakan kemahiran tutorial HTML5_html5 tulen

Perkongsian kod untuk menulis jam pada halaman web menggunakan kemahiran tutorial HTML5_html5 tulen

WBOY
WBOYasal
2016-05-16 15:46:231920semak imbas

Apa yang anda perlu tahu:

Teg kanvas hanyalah bekas grafik, anda perlu menggunakan skrip untuk melukis grafik. Saiz lalai: lebar 300px, tinggi 150px;

Kaedah getContext() mengembalikan objek yang menyediakan kaedah dan sifat untuk melukis pada kanvas. ——Dapatkan objek konteks.

getContext("2d") sifat objek dan kaedah, yang boleh digunakan untuk melukis teks, garisan, segi empat tepat, bulatan, dsb. pada kanvas.

fillRect(l,t,w,h): Warna lalai ialah lejang hitamRect(l,t,w,h): Segi empat sama dengan jidar. Lalai sempadan hitam satu piksel

Kaedah setInterval() boleh memanggil fungsi atau mengira ungkapan mengikut tempoh yang ditentukan (dalam milisaat).

beginPath(): Tentukan permulaan lukisan laluan, yang menetapkan titik semasa kepada (0,0). Apabila persekitaran kanvas pertama kali dicipta, kaedah beginPath()

dipanggil secara eksplisit.
closePath(): Tamat lukisan laluan (sambungkan titik permulaan dan titik akhir)

Lukis bulatan:
arka (x, y, jejari, lengkok permulaan, lengkok penamat, arah putaran)
x, y: kedudukan permulaan
Hubungan antara lengkok dan sudut: Radian = sudut *Math.PI/180
Arah putaran: mengikut arah jam (lalai: palsu, lawan jam: benar)

Kod:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >  
  2. <html lang="en- AS">  
  3. <kepala>  
  4.         <meta charset="UTF- 8">  
  5.         <tajuk>tajuk>  
  6.         <skrip>  
  7.                 window.onload = fungsi(){   
  8.                         var oC = dokumen.getElementById);   
  9.                          var oGC = oC.getContext('2d');   
  10.   
  11.                         fungsi 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 = baharu       //创建日期对象   
  19. var Ohours = Odate .Gethours ( //); var 🎜>
  20. var 🎜>                                                                                                                                                                                                                                                                                                                                                                                                                                                            🎜>                           var var
  21. nilai osen = (-90 osen*6)*math.pi/180 oGC.beginPath();//Mula
  23. untuk(var i=
  24. 0;i<60
  25. ;i ){           //i ialah 60, yang mewakili 60 skala kecil jam oGC.moveTo(x,y);
  26.                                                       oGC.arc(x,y,r,6*i*Math.PI/180,6*(i 1)*Math.false. // 180,/op Ijazah
  27.                                                                                                          
  28. oGC.closePath();
  29. oGC.stroke();
  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();//End
  34. oGC.fill();
  36.                                                                                                                                                                                                                                                                                                                                                                                                                 🎜>
  37.                                                                                                                                                                                                                                                                                                                                                                                                         kepada GC.be's-'s-----oGC.beginPath();                    
  38. untuk(
  39. i=0;i<12
  40. ;i ){                    //i ialah 12, yang mewakili 12 grid skala jam
  41. oGC.moveTo(x,y);
  42.                                                                                                                                                                                                                                                                                                                                                    ‐               oGC =Sudut*Math.PI/180                                                                                                          
  43. oGC.closePath();
  44. oGC.stroke();
  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();//Dail selesai
  51. <<>
    52. OGC.LineWidth
  52. =
    53. 5
  53. ;
    54. oGC.beginPath();//Mula melukis jarum jam
  54. oGC.moveTo(x,y);
    55. oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);//Tetapkan saiz jarum jam dan radian
    56. oGC.closePath();
    57. oGC.stroke();
    59. <<>
  59. OGC.LineWidth =
  60. 3 ;
  61. oGC.beginPath();//Mula melukis jarum minit
  62. oGC.moveTo(x,y);
  64. oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);//Tetapkan saiz jarum minit dan radian
    65. oGC.closePath();
    66. oGC.stroke();
    68.  
  68. oGC.lineWidth = 1;//Tetapkan lebar tangan kedua
    69. oGC.beginPath();//Mula melukis tangan kedua
    70. oGC.moveTo(x,y);
    72. oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);//Tetapkan saiz tangan terpakai dan arka
    73. oGC.closePath();
    74. oGC.stroke();
    75.                                                                      
  75. setInterval(drawClock,1000);//Tetapkan pemasa dan biarkan jam berjalan
  76. drawClock();
  77. };
  78. skrip>
  79. kepala>
  80. <badan>
  81.  <kanvas id = "ch1" lebar = "400px" tinggi = "400px">kanvas> 
  82. badan>
  83. html>

Klik hasil di bawah untuk melihat demo:
http://jsfiddle.net/eh02450b/2/

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan terperinci tentang penggunaan cache manifes dalam kemahiran tutorial HTML5_html5Artikel seterusnya：Penjelasan terperinci tentang penggunaan cache manifes dalam kemahiran tutorial HTML5_html5

Artikel berkaitan

Lihat lagi