Use html5 canvas to draw clock code example sharing_html5 tutorial skills

HTML5 is powerful enough to implement many functions, and drawing a clock is just a gadget. The picture pointer can be implemented using drawImage of ctx. As for compatibility issues, there are already many solutions online. This stuff is for fun, not for application. Learn the canvas API.

I will show you the renderings first

Implementation code

Copy code The code is as follows: // var time = new Date(); var h = time.getHours( ); var m = time.getMinutes(); var s = time.getSeconds(); var weekday={:'Sunday',:'Monday',:'Tuesday',: 'Wednesday',:'Thursday',:'Friday',:'Saturday'}; h=h>?(h-)* parseInt(m/):h* parseInt(m/); //Hour hand Initial position //====================================== var x= ,y=,sAngle=; //x y origin second hand angle variable function draw() { var c=document.getElementById("myCanvas"); var ctx=c.getContext( "d"); ctx.clearRect(,,c.width,c.height); s ;//Second hand //Background ctx.fillStyle = '#eee' // Make changes to the settings ctx.globalAlpha = .; ctx.fillRect(,,c.width,c.height); // Draw a rectangle with new settings //====fill( Indicate) origin === ctx.beginPath(); ctx.arc(x,y,,,true); ctx.fill(); ctx.closePath(); var grd=ctx.createLinearGradient(x,y,,); grd.addColorStop(,"#FF"); grd.addColorStop(.,"#FF"); grd. addColorStop(,"#FF"); ctx.fillStyle=grd; ctx.font = "pt Arial"; ctx.fillText("html",,); ctx.save (); // Time scale for(var i=;i { var angle=(Math.PI*)/; ctx.beginPath() ; var b=i==||i==||i==||i== if(i%==){ if(b){ ctx.fillStyle ="red"; radius=; } else{ ctx.fillStyle="blue"; radius=.; } ctx.font=" px Arial"; ctx.fillText(i/==?:i/,x-,y-); //x large-right small-left y size numerical scale } else { ctx.fillStyle="#"; radius=; } if(s==i)radius=radius; ctx.arc(x,y-,radius ,,true); ctx.fill(); transform(ctx,x,y,angle,true); } ctx.restore(); //== ======================== sAngle=(Math.PI*)/*s; //Seconds ctx.save( ); //Hour hand ctx.fillStyle="red"; // ctx.strokeStyle="red"; ctx.lineWidth=; transform(ctx,x,y,(Math .PI*)/*h,true); sj(ctx,x,y,x-,y-,x ,y-); ctx.restore(); ctx.save( );//Minute hand rotates ctx.fillStyle="blue"; ctx.lineWidth=; transform(ctx,x,y,(Math.PI*)/*m,true); sj(ctx,x,y,x-,y-,x ,y-); ctx.restore(); //The second hand rotates ctx.save(); ctx.fillStyle="#"; transform(ctx,x,y,sAngle,true); sj(ctx,x,y,x-,y-,x ,y-); ctx.restore(); //Data sorting if(s%==){ sAngle=,s=,m; if(m==){ //Every twelve The hour hand rotates once if(m!=)h ; if(m%==)m=; } if(h%==)h=; }; " Year" (time.getMonth() ) "Month" time.getDate() "Day" weekday[time.getDay()] " h:" time.getHours() " m:" m " s:" s; document.getElementById("d").innerHTML=dateString; } //Pointer triangle! function sj(ctx,x,y,x,y,x,y){ //====Example==== // ctx.beginPath(); // ctx.moveTo(x,y); // ctx.lineTo(x,y-) ; // ctx.stroke(); // ctx.beginPath(); // // ctx.moveTo(x-,y-); // ctx .lineTo(x ,y-); // ctx.lineTo(x,y--); // ctx.fill(); ctx.beginPath(); ctx. moveTo(x,y); ctx.lineTo(x,y); ctx.stroke(); ctx.beginPath(); ctx.moveTo(x,y); ctx.lineTo(x,y); ctx.lineTo(x,y); ctx.fill(); } //Rotate according to coordinates function transform(ctx,x,y,angle,b){ if(b){// Clockwise ctx.transform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), x*(-Math.cos(angle)) x*Math.sin(angle), y*(-Math.cos(angle)) - y*Math.sin(angle)) } } //======Execute every second============(Execution event optional) window.setInterval(function(){draw()},) ; // window.onload=function(){ //The effect is the same as above // setInterval("draw()",); // }; // ]]>

Use html5 canvas to draw clock code example sharing_html5 tutorial skills

Related articles