Utilisez Canvas pour dessiner un tutoriel cool clock_html5

D'abord le rendu :

Copier le code

Le code est le suivant :

Si vous voyez ce texte, cela signifie que votre navigateur est faible !
<script><br />window.onload=draw;<br />function draw() {<br />var canvas=document.getElementById('canvas');<br />var context= canvas.getContext('2d');<br />context.save(); ///////////////////////////// // ///Enregistrer<br />context.translate(200,200);<br />var deg=2*Math.PI/12;///////////////// // ///////////////////////////////Dial<br />context.save(); <br />context. BeginPath(); <br />for(var i=0;i<13;i ){<br />var x=Math.sin(i*deg);<br />var y=-Math.cos(i*deg) );<br />context.lineTo(x*150,y*150); <br />}<br />var c=context.createRadialGradient(0,0,0,0,0,130);<br />c.addColorStop( 0,"# 22f");<br />c.addColorStop(1,"#0ef")<br />context.fillStyle=c;<br />context.fill();<br />context.closePath(); 🎜>contexte. <br />////////////////////////////////// /////// ///////Nombre<br />context.save();<br />context.beginPath();<br />for(var i=1;i<13;i ){ <br />var x1=Math .sin(i*deg);<br />var y1=-Math.cos(i*deg);<br />context.fillStyle="#fff";<br />context.font= "bold 20px Calibri";<br />context.textAlign='center';<br />context.textBaseline='middle';<br />context.fillText(i,x1*120,y1*120 <br />}); <br />context.closePath( ); <br />context.restore();/////////////////////////// ///////// //////////////Grande échelle<br />context.save();<br />context.beginPath(); <br />for(var); i=0;i<12;i ) {<br />var x2=Math.sin(i*deg);<br />var y2=-Math.cos(i*deg);<br />context.moveTo(x2 *148,y2*148);<br />context.lineTo(x2*135,y2*135); <br />} <br />context.StrokeStyle='#fff';<br />context.lineWidth=4;<br />context.Stroke();<br />context.closePath();<br />context.restore(>////////////////////); /////////// ////////////////////Petite échelle<br />context.save();<br />var deg1=2* Math.PI/60;<br />context.beginPath (); <br />for(var i=0;i<60;i ){<br />var x2=Math.sin(i*deg1);<br /> var y2=-Math.cos(i*deg1) ;<br />context.moveTo(x2*146,y2*146);<br />context.lineTo(x2*140,y2*140 <br />} <); 🎜>context.StrokeStyle='#fff';<br />context.lineWidth=2;<br />context.Stroke();<br />context.closePath(); //////////// /////////////////////////////////// ///Text<br />context.save();<br />context.StrokeStyle="#fff";<br />context.font=' 34px sans-serif';<br />context.textAlign='center'; <br />context.textBaseline='middle';<br /> context.StrokeText('canvas',0,65); <br />context.restore();/////////// ////////////// ///////////////////////nouvelle date<br />var time=nouvelle date ();<br />var h=(time.getHours() )*2*Math.PI/12;<br />var m=time.getMinutes()*2*Math.PI/60;<br />var s =time.getSeconds()*2*Math.PI/60 <p>//////////////////////////////////////////// /// //Aiguille des heures<br />context.save();<br />context.rotate( h m/12 s/720) ;<br />context.beginPath();<br />context.moveTo(0,6 );<br />context.lineTo(0,-85);<br />context.StrokeStyle="#fff";<br />context.lineWidth=6;<br />context.Stroke();<br />context. closePath(); <br />context.restore();<br />/////////////////////////////// ///// ////////Aiguille des minutes<br />context.save();<br />context.rotate( m s/60 ) ;<br />context.beginPath();<br />context. moveTo(0,8) ;<br />context.lineTo(0,-105);<br />context.StrokeStyle="#fff";<br />context.lineWidth=4;<br />context.Stroke(); <br />context.closePath ();<br />context.restore();<br />//////////////////////////// //////// //////////D'occasion<br />context.save();<br />context.rotate( s ) ;<br />context.beginPath();<br />context.moveTo(0,10) ;<br />context.lineTo(0,-120);<br />context.StrokeStyle="#fff";<br />context.lineWidth=2;<br />context.Stroke ();<br />context.closePath ();<br />context.restore(); <br />context.restore();/////////////////// ////////// Empiler<br />setTimeout(draw, 1000);////////////////////////// //Minuterie <p>} <p></script>