canvas中畫布時鐘的簡單例子
- 零下一度原創
- 2017-06-26 09:45:441202瀏覽
這是一個先前自己練習寫的畫布時鐘
margin: 20px 400px 0;
}
<script><br> var can=document.getElementsByTagName("can〠. );</p> <p> function clock(){<br><br> //每次執行碼 布〠 〠 00,500);<br><br> //畫一個藍色實心圓</p> x.beginPath();<p> x.fillStyle="blue";<br> x.arc(250,250,201] x.arc(250,250,250,410,070. x.fill( );</p> x.closePath();<p><br> // / 藍 x.beginPath ();<br> x.fillStyle="#ffffff";<br> x.arc(250,250 x.arc(250,250 x.arc(250,250,230,Math.PI); x.fill(); <br> x.closePath();<br></p> <p> ///分鐘刻度，透過循環畫出605分鐘刻度，36061/[ for(var i=0 ;i<60;i++){<br/> x.save(); //儲存環境變數<br/> 皮 x.lineWidth=2;<br/> x.translate(250,250); <br/> x.rotate(i*6*Math.PI/180); //每個刻度間隔是6° ，所以i*6 在進行旋轉就畫出了所有刻度## ;<br/> x.lineTo(0,230);</p> Path();<p> x.restore(); //返回環境變數<br/> }## }<br/> <br/> //時鐘刻度，時鐘刻度只有12個所以，360/12 每個之間的間隔是30°，原理和分鐘刻度相同當然你還可以循環更多，例如刻度換為數字<br/> (var a=0;a<12;a++){<br/> x.save();<br/> ] x.lineWidth=4;<br/> x.translate(250,250); <br/> x.rotate(a*30*Math.PI/180);<br/> x.lineTo(0,230);<br/> x.stroke();<br/> x.closePath();<br/> x.restore();<br/> 並分別獲取，時，分，秒，時和分都要精確到小數點後</p><p> var time=new Date();<br/> var minutes=time.getMinutes()+seconds/60; <br/> var hours=time.getHours()+minutes/60;<br/><br/> 〠 11/# 12要減1219也就是要減121213點或要減去13點#2123點#23所以要減1213點的要減113了。 if( hours>12){<br> hours=hours-12<br> 〠 hours=hours-12<br> # //錶盤上顯示本地時間，如2017/06/14 下午20：23<br><br> x. beginPath()<br> x.font="20px 黑體"<br> 合 〵 總 ,0. x.closePath();<br></p> <p> //時<br> x.save();<br> ,250)<br> x.lineWidth=4;<br> x.rotate(hours *30*Math.PI/180);//畫好時針後目前的小時*30就是應該旋轉的°數。 <br> x.moveTo(0,10);<br> 〠 〠 x.stroke();<br> x.closePath();## x.closePath();## 〠 );<br><br> //分<br> beginPath();</p> x.translate(250,250)<p> 總 line. x.rotate(minutes*6*Math.PI/180); //分針同理<br> x.moveTo(0,10);<br> 200)<br> x.stroke ();<br> x.closePath();<br> x ] //秒<br> x.save();<br> ]; # x.translate(250,250);<br> 〠 〠〠 x.rotate(seconds*6*Math.PI/180);//秒針也是一樣<br> x.moveTo x.moveTo x.move );<br> x.lineTo(0,-210);</p># 〠 x.closePath();<p> x.restore();## 秒針上的小圓點<br><br> x.save();<br> ] x.translate(250,250);<br> x.rotate(seconds*6*Math. PI/180);//讓秒針小圓點隨秒針位置，其實和秒針相同<br> x.fillStyle="blue";<br> -170,4,0,Math.PI *360/180);<br> x.fill();<br> 〠 x.restore();<br><br> //中心藍色小圓點上</p> <p></p> <p><br><br>1 <br> x.beginPath();<br> x.arc(250,250,6,0,Math.PI*360/180);<br> x.fill(); <br> x.closePath();<br><br> /中心紅 ## x.fillStyle="red"</p> (250,250,3,0,Math.PI*360/180);<p> x.fill();##〠 </p> }<p> setInterval(clock,1000) ; //隔一秒運行一下這方法，先會清空掉畫布然後重新畫這樣每秒時間都在動了。 <br> </script>
效果
以上是canvas中畫布時鐘的簡單例子的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn