キャンバスに時計を描く方法

この記事では、キャンバスに時計を描く方法を紹介し、みんなに共有します。詳細は次のとおりです。

レンダリングは

上記のコード:

 var Canvas = document.getElementById('canvas');var ctx = Canvas.getContext('2d');var 年、月、日、時、秒、分;//ダイヤル関数を描画drawClockPie(){ ctx.beginPath ( ); ctx.lineWidth = 2; ctx.ストロークスタイル = '#333'; ctx.arc(150,150,146,0,2*Math.PI); ctx.closePath(); ctx.arc(150,150,6,0,2*Math.PI); ctx.fillStyle = 'red' ctx.closePath();}//スケール関数drawClockHours(){ *Math.PI) ctx.lineWidth = 5; '#333'; ctx.moveTo(0,-125); 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.lineWidth = '#333'; ,-140); ctx.lineTo(0,-133); ctx.closePath(); ctx.restore(); }}// 時針の描画関数drawHourPin(){ ctx.translate(150,150); 60 +秒)/(12*60*60)*2*Math.PI); ctx.ストロークスタイル = '#333'; ctx.moveTo(0,-40); ctx.closePath(); );}// 分針描画関数drawMinPin(){ ctx.save(); ctx.translate(150,150); ctx.rotate((分*60+秒)/(60*60)*2*Math.PI); ctx.ストロークスタイル = '#333'; = 2; ctx.moveTo(0,0); ctx.ストローク(); ctx.closePath();}// 秒針を描画します関数drawSecPin(){ ctx.translate(150,150); *2 *Math.PI); ctx.startPath(); = 1; ctx.moveTo(0,-80); ctx.closePath();}// 描画時のテキスト関数drawText() { 時間 = 時間 >= 12 ? 時間 - 12 : 時間 = '現在' + 年 + '年' + 月 + '月' + 日 + '日' + 時間; + '時' + 分 + '分' + 秒 + '秒'; ctx.font = '15px 太字' ctx.fillText(time,24,350);}// 時刻関数 getTimes(){ var date = new Date (); 年 = date.getFullyear(); 月 = date.getMonth() + 1; 日 = date.getDate(); date.getHours(); 分 = date.getMinutes(); 秒 = date.getSeconds();}setInterval(function(){ ctx.clearRect(0,0,600,600);drawClockPie();drawClockHours(); getTimes(); 描画時間ピン(); drawSecPin();},1000);

もちろん、時刻は毎秒取得する必要はなく、一度直接取得して秒単位で取得することも可能です。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。