Rumah > Artikel > hujung hadapan web > 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
- WBOYasal
- 2016-05-16 15:46:231904semak 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.
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)
- >
- <html lang="en- AS">
- <kepala>
- <meta charset="UTF- 8">
- <tajuk>tajuk>
- <skrip>
- window.onload = fungsi(){
- var oC = dokumen.getElementById);
- var oGC = oC.getContext('2d');
- fungsi drawClock(){
- var x = 200; //指定坐标
- var y = 200;
- var r = 150; //指定钟表半径
- oGC.clearRect(0,0,oC.width,oC.height);//清空画布
- var oDate = baharu //创建日期对象
-
var Ohours = Odate .Gethours ( //); var 🎜> - var 🎜>
🎜>
var
var - nilai osen = (-90 osen*6)*math.pi/180 oGC.beginPath();//Mula
- untuk(var i=
- 0;i<60
- ;i ){ //i ialah 60, yang mewakili 60 skala kecil jam oGC.moveTo(x,y);
- oGC.arc(x,y,r,6*i*Math.PI/180,6*(i 1)*Math.false. // 180,/op Ijazah
- oGC.closePath();
- oGC.stroke();
- 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();
- 🎜>
- kepada GC.be's-'s-----oGC.beginPath();
- untuk(
- i=0;i<12
- ;i ){ //i ialah 12, yang mewakili 12 grid skala jam
- oGC.moveTo(x,y);
- ‐ oGC =Sudut*Math.PI/180
- oGC.closePath();
- oGC.stroke();
- oGC.beginPath(); oGC.moveTo(x,y);
- oGC.arc(x,y,r*18/20,360*(i 1)*Math.PI/180,false);
- oGC.closePath();
- oGC.fill();//Dail selesai
- <<> OGC.LineWidth
- = 5
- ; oGC.beginPath();//Mula melukis jarum jam
- oGC.moveTo(x,y); oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);//Tetapkan saiz jarum jam dan radian
- oGC.closePath();
- oGC.stroke();
- <<>
- OGC.LineWidth =
- 3 ;
- oGC.beginPath();//Mula melukis jarum minit
- oGC.moveTo(x,y);
- oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);//Tetapkan saiz jarum minit dan radian oGC.closePath();
- oGC.stroke();
- oGC.lineWidth = 1;//Tetapkan lebar tangan kedua oGC.beginPath();//Mula melukis tangan kedua
- oGC.moveTo(x,y);
- oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);//Tetapkan saiz tangan terpakai dan arka
- oGC.closePath();
- oGC.stroke();
- setInterval(drawClock,1000);//Tetapkan pemasa dan biarkan jam berjalan
- drawClock();
- };
- skrip>
- kepala>
- <badan>
- <kanvas id = "ch1" lebar = "400px" tinggi = "400px">kanvas>
- badan>
- html>
Klik hasil di bawah untuk melihat demo:
http://jsfiddle.net/eh02450b/2/