使用html5 canvas 畫時鐘程式碼實例分享_html5教學技巧

HTML5夠強大實現很多功能，畫一個時鐘只是個小玩意。圖片指針用ctx的drawImage可以實現。至於相容性問題，網路上的解決方案已經很多了。這個東東是用來玩的，不是用來做應用的，學習下canvas API。

先給大家看效果圖

實作碼

複製程式碼 程式碼如下: // var time = new Date(); var h = time.getHours(); var m = time.getMinutes(); var s = time.getSeconds(); var weekday={:'星期日',:'星期一',:'星期二',:'星期三' ,:'星期四',:'星期五',:'星期六'}; h=h>?(h-)* parseInt(m/):h* parseInt(m/); //時針初始位置 //===================================== var x=,y= ,sAngle=; //x y 原點秒針角度變數 function draw() { var c=document.getElementById("myCanvas"); var ctx=c.getContext("d" ); ctx.clearRect(,,c.width,c.height); s ;//秒針 //背景 ctx.fillStyle = '#eee' // Make changes to the settings ctx.globalAlpha = .; ctx.fillRect(,,c.width,c.height); // Draw a rectangle with new settings //===填充(表明)原點=== ctx.beginPath(); ctx.arc(x,y,,true); ctx.fill(); ctx.closePath(); var grd=ctx.createLinearGradient(x,y,,); grd.addColorStop(,"#FF"); grd.addColorStop(.,"#FF"); grd.addColorStop,,,d. "#FF"); ctx.fillStyle=grd; ctx.font = "pt Arial"; ctx.fillText("html",,); ctx.save(); // 時間刻度 for(var i=;i { var angle=(Math.PI*)/; ctx.beginPath(); var b=i==||i==||i==||i== if(i%==){ if(b){ ctx.fillStyle="red "; radius=; } else{ ctx.fillStyle="blue"; radius=.; } ctx.font="px Arial" ; ctx.fillText(i/==?:i/,x-,y-); //x大-右小-左y大小數字刻度 } else { ctx.fillStyle="#"; radius=; } if(s==i)radius=radius ; ctx.arc(x,y-,radius,,truey-,radius,,true ); ctx.fill(); transform(ctx,x,y,angle,true); } ctx.restore(); //======= ===================== sAngle=(Math.PI*)/*s; //秒度 ctx.save(); / /時針 ctx.fillStyle="red"; // ctx.strokeStyle="red"; ctx.lineWidth=; transform(ctx,x,y,(Math.PI* )/*h,true); sj(ctx,x,y,x-,y-,x ,y-); ctx.restore(); ctx.save();/ /分針轉動 ctx.fillStyle="blue"; ctx.lineWidth=; transform(ctx,x,y,(Math.PI*)/*m,true); sjj (ctx,x,y,x-,y-,x ,y-); ctx.restore(); //秒針轉動 ctx.save(); ctx.fillStyle ="#"; transform(ctx,x,y,sAngle,true); sj(ctx,x,y,x-,y-,x ,y-); ctx.restore (); //資料整理 if(s%==){ sAngle=,s=,m ; if(m==){ //每十二分針旋轉一次 if(m!=)h ; if(m%==)m=; } if(h%==)h=; }; //*註:如果是放到外面判斷分針或時針轉動則滿足條件時都重複會運行原因每執行一遍只有秒針在時刻變動*// var dateString=time.getFullYear() "年" ( time.getMonth() ) "月" time.getDate() "日" weekday[time.getDay()] " h:" time.getHours() " m:" m " s:" s; document. getElementById("d").innerHTML=dateString; } //指標三角! function sj(ctx,x,y,x,y,x,y){ //= ===例==== // ctx.beginPath(); // ctx.moveTo(x,y); // ctx.lineTo(x,y-); // ctx.stroke(); // ctx.beginPath(); // // ctx.moveTo(x-,y-); // ctx.lineTo( x ,y-); // ctx.lineTo(x,y--); // ctx.fill(); ctx.beginPath(); ctx.moveTo(x ,y); ctx.lineTo(x,y); ctx.stroke(); ctx.beginPath(); ctx.moveTo(x,y); ctx .lineTo(x,y); ctx.lineTo(x,y); ctx.fill(); } // 座標に従って回転します function throw(ctx,x,y,angle,b){ if(b){// 時計回り ctx.transform(Math.cos(角度), Math.sin(角度), -Math.sin(角度), Math.cos(角度), x*(-Math.cos(角度)) x*Math.sin(角度), y*(-Math.cos(角度)) - y*Math.sin(角度)) } } //======毎秒実行============(実行イベントはオプション) window.setInterval(function(){draw()}, ) ; // window.onload=function(){ // 効果は上記と同じです // setInterval("draw()",) // / / ]]>

使用html5 canvas 畫時鐘程式碼實例分享_html5教學技巧

相關文章