Cara menggambar jam di kanvas

Artikel ini memperkenalkan cara menggambar jam di atas kanvas dan membagikannya kepada semua orang, detailnya adalah sebagai berikut:

Rendernya adalah

Kode di atas:

 var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var tahun,bulan,hari,jam,detik,menit;//Gambar fungsi dial drawClockPie(){ ctx.beginPath ( ); ctx.lebar garis = 2; ctx.strokeStyle = '#333'; ctx.arc(150,150,146,0,2*Math.PI); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.fillStyle = 'merah'; ctx.fill(); Fungsi skala drawClockHours(){ saat menggambar *Math.PI); ctx.beginPath(); ctx.lineWidth = 5; '#333'; ctx.moveTo(0,-140); ctx.lineTo(0,-125); ctx.stroke(); ctx.closePath(); drawClockMins(){ for(var i = 0,l = 60; i < 60; i++){ ctx.save(); ctx.translate(150,150); ctx.rotate(i*1/60*2*Math.PI); ctx.beginPath(); ctx.lineWidth = 3; ,-140); ctx.lineTo(0,-133); ctx.closePath(); ctx.restore(); }}// Menggambar fungsi jarum jam drawHourPin(){ ctx.save(); 60 +detik)/(12*60*60)*2*Math.PI); ctx.beginPath(); ctx.strokeStyle = '#333'; ctx.lineWidth = 3; ctx.moveTo(0,0); ctx.lineTo(0,-40); );}// Menggambar fungsi jarum menit drawMinPin(){ ctx.save(); ctx.translate(150,150); ctx.rotate((menit*60+detik)/(60*60)*2*Math.PI); ctx.beginPath(); = 2; ctx.moveTo(0,0); ctx.stroke(); ctx.closePath(); ctx.restore();}// Menggambar fungsi tangan kedua drawSecPin(){ ctx.save(); *2 *Matematika.PI); ctx.beginPath(); ctx.strokeStyle = 'merah'; = 1; ctx.moveTo(0,0); ctx.lineTo(0,-80); ctx.stroke(); ctx.closePath(); { jam = jam >= 12 ? jam - 12 : jam; var time = 'Sekarang adalah' + tahun + 'tahun' + bulan + 'bulan' + hari + 'hari' + jam + 'jam' + menit + 'menit' + detik + 'detik'; ctx.font = '15px tebal'; ctx.fillText(time,24,350);}// Dapatkan fungsi waktu getTimes(){ var date = Tanggal baru (); tahun = tanggal.getFullYear(); bulan = tanggal.getMonth() + 1; hari = tanggal.getDate(); tanggal.getHours(); menit = tanggal.getMinutes(); detik = tanggal.getSeconds();}setInterval(fungsi(){ ctx.clearRect(0,0,600,600); drawClockPie(); drawClockHours(); drawClockMins(); getTimes(); drawText(); drawHourPin(); drawSecPin();},1000);

Tentu saja waktu tidak perlu diperoleh setiap detik, tetapi bisa langsung diperoleh satu kali dan bertambah beberapa detik.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.