캔버스에 시계를 그리는 방법

이번 글에서는 캔버스에 시계를 그리는 방법을 소개하고, 자세한 내용은 다음과 같습니다.

렌더링은

위 코드:

 var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var year,month,day,hour,second, Minute;//다이얼 함수 그리기 drawClockPie(){ ctx.beginPath ( );ctx.lineWidth = 2;ctx.StrokeStyle = '#333'; ctx.arc(150,150,146,0,2*Math.PI); ctx.closePath(); ctx.arc(150,150,6,0,2*Math.PI); ctx.fillStyle = '빨간색'; ctx.closePath();}// Scale function drawClockHours(){ 그릴 때 *Math.PI) ctx.lineWidth = 5; '#333'; ctx.lineTo(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(); }}// 시침 그리기 함수 drawHourPin(){ ctx.translate(150,150); 60 +초)/(12*60*60)*2*Math.PI); ctx.beginPath(); ctx.StrokeStyle = '#333'; ctx.lineTo(0,-40); ctx.closePath(); );}// 분침 그리기 함수 drawMinPin(){ ctx.save(); ctx.translate(150,150); ctx.rotate((분*60+초)/(60*60)*2*Math.PI) ctx.beginPath(); ctx.lineWidth; = 2;ctx.moveTo(0,0); ctx.스트로크(); ctx.closePath(); ctx.restore();}// 초침 그리기 drawSecPin(){ ctx.translate(150,150); *2 *Math.PI); ctx.beginPath(); ctx.StrokeStyle = 'red'; = 1; ctx.lineTo(0,-80); ctx.closePath();}// 그리기 시간 텍스트 함수 { 시간 = 시간 >= 12 ? 시간 - 12 : 시간; var time = '현재' + 연도 + '연도' + 월 + '월' + 일 + '일' + 시간 + '시' + 분 + '분' + 초 + '초'; ctx.font = '15px 굵은 글씨'(time,24,350);}// 시간 가져오기 function 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(); drawClockMins(); getTimes(); drawHourPin(); drawSecPin();},1000);

물론, 시간은 매초마다 얻어질 필요는 없고 직접 한 번 얻어서 초 단위로 증가시킬 수 있다.

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.