感覺是不是特想送鐘，老是編寫些時鐘的效果，今日就發個醜醜的時鐘，老實說 有沒有什麼調試canvas的工具，老是要在瀏覽器刷新查看效果，好累啊~ （┬＿┬） 代碼： 這個鐘重點不在怎麼畫，在三角函數，三角函數的使用與角度息息相關，Math.PI是π，Math.sin(),Math.cos()它們都是接 ...
感覺是不是特想送鐘，老是編寫些時鐘的效果，今日就發個醜醜的時鐘，老實說
有沒有什麼調試canvas的工具，老是要在瀏覽器刷新查看效果，好累啊~
（┬＿┬）
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background: #eee; } canvas{ background: #fff; } </style> </head> <body> <canvas width="800" height="800">你瀏覽器不支持，請升級...</canvas> <audio id="audio" src="1.wav"></audio> <script> var oAudio=document.getElementById("audio"); var oCas=document.getElementsByTagName("canvas")[0]; var cas=oCas.getContext("2d"); oAudio.ontimeupdate=function(){ if(oAudio.currentTime>0.1){ this.pause(); } } /*漸變顏色*/ var color=cas.createRadialGradient(400,400,10,400,400,200); color.addColorStop(0,"#f1f4f5"); color.addColorStop(1,"#c5c6c7"); setInterval(function(){ oAudio.currentTime=0; oAudio.play(); cas.clearRect(0,0,800,800); /*畫圓框*/ cas.lineWidth=3; cas.shadowColor="#888"; cas.shadowOffsetX=1; cas.shadowOddsetY=1; cas.shadowBlur=5; cas.arc(400,400,200,0,Math.PI*2,false); cas.strokeStyle=color; cas.stroke(); /*畫圓內*/ cas.fillStyle=color; cas.fill(); /*畫時刻*/ drawTime(); function drawTime(){ var len=8; var len1=16; cas.strokeStyle="#7f7f7f"; cas.shadowOffsetX=0; cas.shadowOddsetY=0; cas.shadowBlur=0; cas.beginPath(); for(var i=0;i<60;i++){ if(i%5==0){ cas.moveTo(400+Math.cos(i*6*Math.PI/180)*200,400+Math.sin(i*6*Math.PI/180)*200); cas.lineTo(400+(200-len1)*Math.cos(i*6*Math.PI/180),400+(200-len1)*Math.sin(i*6*Math.PI/180)); }else{ cas.moveTo(400+Math.cos(i*6*Math.PI/180)*200,400+Math.sin(i*6*Math.PI/180)*200); cas.lineTo(400+(200-len)*Math.cos(i*6*Math.PI/180),400+(200-len)*Math.sin(i*6*Math.PI/180)); } } cas.stroke(); } /*畫時針*/ var date=new Date(); var h=date.getHours(); var m=date.getMinutes(); var s=date.getSeconds(); /*時針*/ needle(h*5+5*m/60,100,"#579ec5"); /*分針*/ needle(m,130,"#5e717c"); /*秒針*/ needle(s,150,"#1d1e1e"); /*圓的中心點*/ cas.fillStyle="#858384"; cas.beginPath(); cas.arc(400,400,5,0,2*Math.PI,true); cas.shadowOffsetX=1; cas.shadowOddsetY=1; cas.shadowBlur=5; cas.fill(); },1000); /*時針的函數*/ function needle(t,len,color){ var angle=Math.PI/180; cas.beginPath(); cas.strokeStyle=color; cas.moveTo(400,400); cas.lineTo(400+len*Math.cos((t*6-90)*angle),400+len*Math.sin((t*6-90)*angle)); cas.stroke(); } </script> </body> </html>
這個鐘重點不在怎麼畫，在三角函數，三角函數的使用與角度息息相關，Math.PI是π，Math.sin(),Math.cos()它們都是接受弧度的，所以要
把角度轉換成弧度，在畫鐘前要先判斷時鐘的條件，把圓分成60份，每一份代表一個刻度，還有在圓的坐標是數學里的正方向為準的，所以
需要把開始坐標調一下，減個90度就可以和時鐘的開始位置一樣了。
在學canvas前一定要把以前遺忘的數學函數複習複習一下，不是一些複雜的算數就無法做了，canvas的學習就是坐標的不斷確認的，然後連成線
最後畫成圖，這與數學里的點到線，線到面一樣的道理。
上面的代碼不難都是使用線條畫的，就是重覆的使用畫線函數和填充顏色。噢~還有外加了一個聲頻標簽使用，達到時鐘的聲音 滴答滴答滴答~
