This article example describes the method of js+html5 to draw a web clock. It draws a clock with a pendulum that can be used on a web page. It can be adjusted in size and position through buttons. The specific implementation content is as follows.
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Clock</title><script type="text/javascript"> var xClock=300; //Center position var yClock=250; //Center position var d=180.0;//Center radius of the clock circle surface var value = -d*1.07; function enlarge(){ d++;}function reduce(){ d--;}function westwards(){var c=document.getElementById("myCanvas");var g2d=c.getContext("2d"); g2d.translate(-1,0); //Set the axis origin at the center of the table c=document.getElementById("myPendulum"); g2d=c.getContext("2d"); g2d.translate(-1,0); //Set the axis origin at the center of the table c=document.getElementById("myCanvas"); var g2d=c.getContext("2d"); g2d.translate(1,0); //Set the axis origin at the center of the table c=document.getElementById("myPendulum"); g2d=c.getContext("2d"); g2d.translate(1,0); //Set the axis originate at the center of the table}function upwards(){var c=document.getElementById("myCanvas"); var g2d=c.getContext("2d"); g2d.translate(0,-1); //Set the axis originate at the center of the table c=document.getElementById("myPendulum"); g2d=c.getContext("2d"); g2d.translate(0,-1); //Set the axis originate at the center of the table}function downwards(){var c=document.getElementById("myCanvas");var g2d=c.getContext("2d"); g2d.translate(0,1); //Set the axis originate at the center of the table c=document.getElementById("myPendulum"); g2d=c.getContext("2d"); g2d.translate(0,1); //Set the axis originate at the center of the table} function fillPolygon( a, b, fillColor, ctx){ctx.beginPath();ctx.moveTo(a[0],b[0]); for (var j=1;j<a.length;j++)ctx.lineTo(a[j],b[j]);ctx.closePath();ctx.fillStyle=fillColor;ctx.fill();} function randomColor(){ var s ="#";for (var i=0;i<3;i++)s += Math.floor(Math.random()*16).toString(16); return s;} function locateCoordinate() {var c=document.getElementById("myCanvas");var g2d=c.getContext("2d"); g2d.translate(xClock,yClock); //Set the coordinate axis originate at the center of the table var c=document.getElementById("myPendulum"); var g2d=c.getContext("2d"); g2d.translate(xClock,yClock); //Set the coordinate axis originate at the center of the table} function drawFace(){ //Define the drawFace method on the surface of the clock/* Array of the smaller size of the diamond mark vertex coordinates representing 1, 2, 4, 5, 7, 8, 10, 11 o'clock*/var x = new Array(0, Math.round(d/30), 0, Math.round(-d/30)); var y = new Array( Math.round(-d*1.07),-d,Math.round(-d*0.9),-d);/* Array of vertex coordinates of a larger size representing the positions of 3, 6, 9, and 12 o'clock*/var x1= new Array(0,Math.round(d/15), 0,Math.round(-d/15));var y1 = new Array(Math.round(-d*1.13),-d,Math.round(-d*0.9),-d);var c=document.getElementById("myCanvas");var g2d=c.getContext("2d"); //BeginPath(); g2d.arc(0,0,d, 0 , 2*Math.PI); g2d.strokeStyle="lightGray"; g2d.lineWidth=d/18; g2d.stroke(); //The last stroke, draw the edge of the clock circle//Begin to prepare to draw a diamond representing each hour for (var i=0;i<12;i++) { //For the loop body of the loop statement starts if (i%3==0){ //Draw a larger size red diamond to represent 3,6,9,12 points fillPolygon( x1, y1, "red", g2d); } else {//Draw a smaller orange diamond to represent the remaining hours fillPolygon(x,y,"orange",g2d); }//Take the center of the clock as the origin, and the coordinate system rotates clockwise by 30 degrees to draw the diamond mark of the next hour position g2d.rotate(Math.PI/6.0); }//For loop body end of the loop statement}//DrawFace method end of the clock surface/* Method for defining the hour hand, minute hand, and second hand of the clock drawNeedles* formal parameter Hradian, unit radian, is the radian position of the hour hand calculated from 0 points, * formal parameter Mradian, unit radian, is the radian position of the minute hand calculated from 0 minutes, * formal parameter Sradian, unit radian, is the radian position of the second hand calculated from 0 seconds. */function drawNeedles( Hradian, Mradian, Sradian ){var c=document.getElementById("myCanvas");var g2d=c.getContext("2d");//Take the clock center as the origin, and rotate the Hradian radian clockwise to draw the hour hand g2d.rotate(Hradian); //Arrange coordinates representing the polygon vertices of the hour hand var Hx =new Array(0, Math.round(d/19),0, Math.round(-d/19) ); var Hy =new Array( Math.round(-d/2), Math.round(-d/3), 0, Math.round(-d/3) ); fillPolygon(Hx,Hy,"magenta",g2d);//Set the hour hand to purple-red, //Take the clock center as the origin, and rotate the Hradian radian counterclockwise to restore the coordinate system g2d.rotate(-Hradian); //Take the clock center as the origin, and rotate the Mradian radian clockwise to draw the minute hand g2d.rotate(Mradian);//The coordinate array representing the polygon vertex of the minute hand var Mx=new Array(Math.round(-d/19), 0,Math.round(d/19)); var My=new Array(0,Math.round(-d/1.3), 0); fillPolygon(Mx,My,"gray",g2d); //Set the minute hand to gray//Take the clock as the origin, and the coordinate system rotates the Mradian radian counterclockwise to restore the coordinate system g2d.rotate(-Mradian); //Take the clock as the origin, and the coordinate system rotates the Sradian radian clockwise to draw the second hand g2d.rotate(Sradian); //Second hand to the random color g2d.strokeStyle='green'; g2d.lineWidth="1"; g2d.moveTo(0,0); g2d.lineTo(0,Math.round(-d/1.1)); g2d.stroke(); g2d.beginPath(); g2d.arc(0,Math.round(-d),d/18, 0 , 2*Math.PI); g2d.fillStyle=randomColor(); g2d.fill(); //For the last stroke, draw the small ball at the vertex of the second hand//Take the center of the clock as the origin, and rotate the Sradian radian counterclockwise to restore the coordinate system g2d.rotate(-Sradian); } //The code block of the drawing needle method drawNeedles/* Draw a string to represent the instantaneous time*/function DrawTime() { var time=new Date(); //Get the current time. var hour=time.getHours(); //Get the hour var minute=time.getMinutes(); //Get the minute var second=time.getSeconds(); //Get the number of seconds var apm="AM"; //Default display morning: AM. var canvas =document.getElementById("myCanvas"); var g2d =canvas.getContext("2d"); if(hour>12){ //Stop displaying hour=hour-12; apm="PM"; } if(minute<10){ //If there is only 1 digit in the minute, add 0 to display minute="0"+minute; } if(second<10){ //If the number of seconds is only 1 digit, add 0 to display second="0"+second; } g2d.clearRect(-xClock,-yClock,600,600); //Clean screen var s = hour+":"+minute+":"+second+":"+apm; g2d.fillStyle="red"; g2d.font = d/4+ "px KAITI"; g2d.fillText(s,-d/1.8, d*1.4); g2d.font= d/4 + "px Kaiyi";// Create gradientvar gradient=g2d.createLinearGradient(0,0,canvas.width,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");// Fill with gradientg2d.fillStyle=gradient;g2d.fillText("Big Data",-d/2.6,d/2);// Obtain the second reading of the instance creation moment, and calculate the arc reading of the second hand, relative to 0 seconds, var c = Math.PI/30 * second; //Get the minute reading of the creation moment, and calculate the arc reading of the minute hand, var b = Math.PI/30 * minute;/* Get the hour reading of the creation moment, and calculate the arc reading of the hour hand, relative to 0 point, and calculate the arc reading of the arc reading of the hour hand. * The degree of the radian that the hour hand walks is the hourly point (30 degrees per hour), plus the correction value of the number of minutes passed*/var a = Math.PI/180*(30 * hour + minute/2);/* The coordinate system is translated (xClock,yClock) so that the coordinate axis becomes the center of the dial*/ drawFace(); drawNeedles( a, b, c); } // The code block end of the method DrawTime var i=0;function pendulum() { //pendulum_bobvar instantAngle = new Array(64,61,56,49,40,29,16,3,-8,-16,-29,-40,-49,-56,-61,-64,-64,-64,-61,-56,-49,-40,-29,-16,-8,3,16,29,40,49,56,61,64,64); //The pendulum's real-time angle array var c=document.getElementById("myPendulum");var ctx=c.getContext("2d");var alpha=instantAngle[i++%instantAngle.length]*Math.PI/180;ctx.clearRect(-300,-300,900,900);ctx.rotate(alpha); // Set the second hand to the random color ctx.fillStyle='brown'; ctx.fillRect(-3,0,6,d*1.4); ctx.shadowBlur=20;ctx.shadowColor="black";ctx.fillStyle="blue";//ctx.fillRect(-d/3.5, d*1.35, d/1.6, d/4.4); ctx.font="40px Kaiyi";// Create gradientvar gradient=ctx.createLinearGradient(0,0,c.width,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","white");// Fill with gradient//ctx.fillStyle=gradient;ctx.fillStyle="red"; ctx.fillText("Big Data",-d/3.2,d*1.55);ctx.shadowBlur=0;ctx.shadowColor=null;ctx.fillStyle=null;ctx.rotate(-alpha); } function preparation(){ locateCoordinate() setInterval('DrawTime()',500); setInterval('pendulum()',200);} </script><style>#myCanvas{ z-index:3; position:absolute; left:0px; top:0px; }#myPendulum{ z-index:2; position:absolute; left:0px; top:0px;}#controlPanel{ position:absolute; left:600px; top:0px; width:100px; text-align:center; font-family:"KaiTi"; font-size:20px; font-weight:bold; color:#6C0;}</style></head><body onLoad="preparation()"><canvas id="myCanvas" > <p>Your browserdoes not support the canvas element!</p> </canvas><canvas id="myPendulum" > <p>Your browserdoes not support the canvas element!</p> </canvas><div id="controlPanel"><table><tr><td>Control</td><td>Button</td></tr><td><input value="Enlarge" type="button" onclick="enlarge()"></button></td><td><input value="Reduce" type="button" onclick="reduce()"></button></td></tr> <tr><td><input value="Left" type="button" onclick="westwards()"></button></td><td><input value="right" type="button" onclick="eastwards()"></button></td></tr> <tr><td><input value="upwards" type="button" onclick="upwards()"></button></td><td><input value="downwards" type="button" onclick="downwards()"></button></td></tr></table> </div></body></html>Reproduction image:
I hope this article will be helpful to everyone's web programming.