使用canvas繪製超炫時鐘_html5教學技巧

先上效果圖：

複製代碼

代碼如下:

br />








head>

如果你看到這段文字，表示你的瀏覽器弱爆了！
<script><br />window.onload=draw;<br /><script><br />window.onload=draw;<br />function draw() {<br />var canvas=document.getElementById('canvas');<br />var context=canvas. getContext('2d');<br />context.save(); ////////////////////////////////// /儲存<br />context.translate(200,200);<br />var deg=2*Math.PI/12; <br />///////////////////// ////////////////////////////////////////////////////錶盤<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(); <br />context.restore( ); <br />////////////////////////////////////////////// /////數字<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(); <br />////////////////////////////////////// ////////////大刻度<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(); <br />///////////////////////////////// /////////////////小刻度<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 />} <br />context.strokeStyle='#fff';<br />} <br />context.strokeStyle='#fff';<br />;<br /> context.lineWidth=2;<br />context.stroke();<br />context.closePath(); <br />context.restore(); <br />/////////////// /////////////////////////////////////////////////////////////文字<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(); <br />/////////////////////////// //////////////////////new Date<br />var time=new 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> <p>/////////////////////////////////////////////// /時針<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 />/////////////////////////////////////// ///////分針<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 />//////////////////////////////////// /////////秒針<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();</script>

context.closePath( );context.restore(); context.restore();//////////////////////////////出setTimeout(draw, 1000);/////////////////////////////計時器

}