Canvas: How to draw clocks and clocks

Canvas: How to draw clocks and clocks

This article describes how to draw clocks and clocks on canvas. The details are as follows:

Is

Code:

Var canvas = document. getElementById ('canvas '); var ctx = canvas. getContext ('2d '); var year, month, day, hour, second, minute; // draw the dial function drawClockPie () {ctx. beginPath (); ctx. lineWidth = 2; ctx. strokeStyle = '#333'; ctx. arc (150,150,146, * Math. PI); ctx. stroke (); ctx. closePath (); ctx. beginPath (); ctx. arc (150,150, 2 * Math. PI); ctx. fillStyle = 'red'; ctx. fill (); ctx. closePath ();} // draw the time degree function drawC LockHours () {for (var I = 0, l = 12; I <12; I ++) {ctx. save (); ctx. translate (150,150); ctx. rotate (I * 1/12*2 * Math. PI); ctx. beginPath (); ctx. lineWidth = 5; ctx. strokeStyle = '#333'; ctx. moveTo (0,-140); ctx. lineTo (0,-125); ctx. stroke (); ctx. closePath (); ctx. restore () ;}// draw the Score function 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; ctx. strokeStyle = '#333'; ctx. moveTo (0,-140); ctx. lineTo (0,-133); ctx. stroke (); ctx. closePath (); ctx. restore () ;}// draw the hour-hand function drawHourPin () {ctx. save (); ctx. translate (150,150); ctx. rotate (hour * 60*60 + minute * 60 + second)/(12*60*60) * 2 * Math. PI); ctx. beginPath (); ctx. strokeStyle = '#333'; ctx. lineWidth = 3; ctx. moveTo (0, 0); ctx. lineTo (0,-40); ctx. stroke (); ctx. cl OsePath (); ctx. restore ();} // draw the sub-needle function drawMinPin () {ctx. save (); ctx. translate (150,150); ctx. rotate (minute * 60 + second)/(60*60) * 2 * Math. PI); ctx. beginPath (); ctx. strokeStyle = '#333'; ctx. lineWidth = 2; ctx. moveTo (0, 0); ctx. lineTo (0,-60); ctx. stroke (); ctx. closePath (); ctx. restore ();} // draw the second-hand function drawSecPin () {ctx. save (); ctx. translate (150,150); ctx. rotate (second/60*2 * Math. PI); ctx. beginPath (); Ctx. strokeStyle = 'red'; ctx. lineWidth = 1; ctx. moveTo (0, 0); ctx. lineTo (0,-80); ctx. stroke (); ctx. closePath (); ctx. restore () ;}// draw time text function drawText () {hour = hour> = 12? Hour-12: hour; var time = 'now '+ year + 'Year' + month + 'month' + day + 'day' + hour +' hour + minute + 'minute '+ second + 'second '; ctx. font = '15px '; ctx. fillText (time, 24,350);} // obtain the time function getTimes () {var date = new Date (); year = date. getFullYear (); month = date. getMonth () + 1; day = date. getDate (); hour = date. getHours (); minute = date. getMinutes (); second = date. getSeconds ();} setInterval (function () {ctx. clearRect (0, 0, 600,600); drawClockPie (); drawClockHours (); drawClockMins (); getTimes (); drawText (); drawhurpin (); drawMinPin (); drawSecPin () ;}, 1000 );

Note:

Of course, the time can also be obtained every second without having to do so. You can directly retrieve the time and increment it by second.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.