キャンバスを使用してクールな時計を描く_html5 チュートリアル スキル

まずレンダリング:

コードをコピー

コードは次のとおりです。

このテキストが表示された場合は、ブラウザが弱いことを意味します。
<script><br>window.onload=draw;<br>functiondraw() {<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>///////////////// // ///////////////////////////////Dial<br>context.save(); beginPath(); <br>for(var i=0;ivar 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(); 🎜>context.restore(); <br>//////////////////////// /////// ///////Number<br>context.save();<br>context.beginPath();<br>for(var i=1;ivar x1=Math .sin(i*deg);<br>var y1=-Math.cos(i*deg);<br>context.fillStyle="#fff";<br>context.font= "太字 20px Calibri";<br>context.textAlign='center';<br>context.textBaseline='middle';<br>context.fillText(i,x1*120,y1*120); <br>context.closePath(); <br>context.restore(); <br>//////////////////// ///////// //////////////大規模<br>context.save();<br>context.beginPath(); i=0;ivar 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.ストロークスタイル='#fff';<br>context.lineWidth=4;<br>context.ストローク();<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;ivar 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.drawingStyle='#fff';<br>context.lineWidth=2;<br>context.closePath(); <br>context.restore(); //////////// ///////////////////////////////////// ///Text<br>context.save();<br>context.drawingStyle="#fff";<br>context.font=' 34px sans-serif';<br>context.textAlign='center'; <br>context.textBaseline='middle';<br> context.bloodText('canvas',0,65); <br>context.restore(); /////////////// /////////////////////////新しい日付<br>var time=新しい日付();<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>//////////////////////////////////////////// /// //時針<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.drawingStyle="#fff";<br />context.lineWidth=6;<br />context.ストローク();<br />コンテキスト。 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.ストロークスタイル="#fff";<br />context.lineWidth=4;<br />context.ストローク(); <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.ストロークスタイル="#fff";<br />context.lineWidth=2;<br />context.ストローク();<br />context.closePath ();<br />context.restore(); <br />context.restore();///////////// ////////// スタックアウト<br />setTimeout(draw, 1000);/////////////////////////// //タイマー</p> <p>}</p> <p></script>