JS + Canvas draw clock effect

This article mainly introduces the specific implementation code for drawing a clock using canvas Based on javascript, which has some reference value, interested friends can refer to the examples in this article to share with you the specific code for drawing a clock using canvas for your reference. The specific content is as follows:

1. clock.html

  
  
  Canvas clock    
 Script var canvas = document. getElementById ("canvas"); var context = canvas. getContext ('2d '); // draw (); function draw () {// obtain the current system time and minute var now = new Date (); var sec = now. getSeconds (); var min = now. getMinutes (); var hour = now. getHours (); hour> = 12 & (hour = hour-12); var radius = Math. min (canvas. width/2, canvas. height/2); // initialize the canvas context. save (); context. clearRect (0, 0, canvas. width, canvas. height); context. translat E (canvas. width/2, canvas. height/2); context. rotate (-Math. PI/2); context. save (); // table box // hour scale context. strokeStyle = "black"; context. fillStyle = "black"; context. lineWidth = 3; context. lineCap = "round"; context. beginPath (); for (var I = 0; I <12; I ++) {context. rotate (Math. PI/6); context. moveTo (radius-30, 0); context. lineTo (radius-10, 0);} context. stroke (); context. restore (); context. save (); // minute scale context. lineWidt H = 2; context. beginPath (); for (var I = 0; I <60; I ++) {if (! I % 5 = 0) {context. moveTo (radius-15, 0); context. lineTo (radius-10, 0);} context. rotate (Math. PI/30);} context. stroke (); context. restore (); context. save (); // draw context on the hour hand. rotate (Math. PI/6) * hour + (Math. PI/360) * min + (Math. PI/21600) * sec); context. lineWidth = 6; context. beginPath (); context. moveTo (-10, 0); context. lineTo (radius * 0.5, 0); context. stroke (); context. restore (); context. save (); context. rotate (Math. PI/30) * min + (Math. PI/1800) * sec); context. strokeStyle = "# 29A8DE"; context. lineWidth = 4; context. lineCap = "butt"; context. beginPath (); context. moveTo (-20, 0); context. lineTo (radius * 0.7, 0); context. stroke (); context. restore (); context. save (); context. rotate (sec * Math. PI/30); context. strokeStyle = "red"; context. lineWidth = 2; context. lineCap = "butt"; context. beginPath (); context. moveTo (-30,0); context. lineTo (radius * 0.9, 0); context. stroke (); context. restore (); context. save (); context. lineWidth = 4; context. strokeStyle = "gray"; context. beginPath (); context. arc (0, 0, radius, 0, Math. PI * 2, true); context. stroke (); context. restore (); context. restore ();} window. onload = function () {setInterval (draw, 1000)} script

2. JavaScript code

Script var canvas = document. getElementById ("canvas"); var context = canvas. getContext ('2d '); // draw (); function draw () {// obtain the current system time and minute var now = new Date (); var sec = now. getSeconds (); var min = now. getMinutes (); var hour = now. getHours (); hour> = 12 & (hour = hour-12); var radius = Math. min (canvas. width/2, canvas. height/2); // initialize the canvas context. save (); context. clearRect (0, 0, canvas. width, canvas. height); context. translat E (canvas. width/2, canvas. height/2); context. rotate (-Math. PI/2); context. save (); // table box // hour scale context. strokeStyle = "black"; context. fillStyle = "black"; context. lineWidth = 3; context. lineCap = "round"; context. beginPath (); for (var I = 0; I <12; I ++) {context. rotate (Math. PI/6); context. moveTo (radius-30, 0); context. lineTo (radius-10, 0);} context. stroke (); context. restore (); context. save (); // minute scale context. lineWidt H = 2; context. beginPath (); for (var I = 0; I <60; I ++) {if (! I % 5 = 0) {context. moveTo (radius-15, 0); context. lineTo (radius-10, 0);} context. rotate (Math. PI/30);} context. stroke (); context. restore (); context. save (); // draw context on the hour hand. rotate (Math. PI/6) * hour + (Math. PI/360) * min + (Math. PI/21600) * sec); context. lineWidth = 6; context. beginPath (); context. moveTo (-10, 0); context. lineTo (radius * 0.5, 0); context. stroke (); context. restore (); context. save (); context. rotate (Math. PI/30) * min + (Math. PI/1800) * sec); context. strokeStyle = "# 29A8DE"; context. lineWidth = 4; context. lineCap = "butt"; context. beginPath (); context. moveTo (-20, 0); context. lineTo (radius * 0.7, 0); context. stroke (); context. restore (); context. save (); context. rotate (sec * Math. PI/30); context. strokeStyle = "red"; context. lineWidth = 2; context. lineCap = "butt"; context. beginPath (); context. moveTo (-30,0); context. lineTo (radius * 0.9, 0); context. stroke (); context. restore (); context. save (); context. lineWidth = 4; context. strokeStyle = "gray"; context. beginPath (); context. arc (0, 0, radius, 0, Math. PI * 2, true); context. stroke (); context. restore (); context. restore ();} window. onload = function () {setInterval (draw, 1000)} script

The above is all the content of this article, and I hope it will help you learn javascript programming.

For more articles on how to draw clock effects in JS + Canvas, please follow the PHP Chinese network!