HTML5使用canvas元素繪制指針式動畫時鐘

2024-09-05 12:19:04

字體：大中小

來源：轉載

供稿：網友

HTML5使用canvas元素繪制指針式動畫時鐘，也就是手表式的電子鐘，本示例對于學習HTML5來說是相當不錯的，因為里面有很多的代碼注釋，特別是想學習HTML5的朋友，更應該看一看。測試時，請確保你的瀏覽器必須支持HTML5的屬性，否則Canvas無法被執行。

<!DOCTYPE html>   <head>   <meta charset="UTF-8"><title>HTML5 canvas元素繪制指針式動畫時鐘</title><script type="text/javascript">var canvas;var context;//頁面裝載function window_onload(){    canvas=document.getElementById("canvas");//獲取canvas元素    context=canvas.getContext('2d');//獲取canvas元素的圖形上下文對象    setInterval("draw()",1000);//每隔一秒重繪時鐘，重新顯示時間}//繪制時鐘function draw(){        var radius=Math.min(canvas.width / 2, canvas.height / 2) -25;//時鐘羅盤半徑    var centerx=canvas.width/2;//時鐘中心橫坐標    var centery=canvas.height/2;//時鐘中心縱坐標    context.clearRect(0,0,canvas.width,canvas.height);//擦除之前所繪時鐘    context.save();//保存當前繪制狀態    //繪制時鐘圓盤    context.fillStyle = '#efefef';//時鐘背景色    context.strokeStyle = '#c0c0c0';//時鐘邊框顏色    context.beginPath();//開始創建路徑    context.arc(centerx,centery,radius, 0,Math.PI*2, 0);//創建圓形羅盤路徑    context.fill();//用背景色填充羅盤    context.stroke();//用邊框顏色繪制羅盤邊框    context.closePath();//關閉路徑    context.restore();//恢復之前保存的繪制狀態    //繪制時鐘上表示小時的文字    var r = radius - 10;//縮小半徑，因為要將文字繪制在時鐘內部    context.font= 'bold 16px 宋體';//指定文字字體    Drawtext('1', centerx + (0.5 * r), centery - (0.88 * r));    Drawtext('2', centerx + (0.866 * r), centery - (0.5 * r));    Drawtext('3', centerx + radius - 10,centery);    Drawtext('4', centerx + (0.866 * r), centery + (0.5 * r));    Drawtext('5', centerx + (0.5 * r), centery + (0.866 * r));    Drawtext('6', centerx, centery + r);    Drawtext('7', centerx - (0.5 * r), centery + (0.866 * r));    Drawtext('8', centerx - (0.866 * r), centery + (0.49 * r));    Drawtext('9', centerx - radius + 10, centery);    Drawtext('10',centerx - (0.866 * r),centery - (0.50 * r));    Drawtext('11', centerx - (0.51 * r), centery - (0.88 * r));    Drawtext('12', centerx, 35);    //繪制時鐘指針        var date=new Date();//獲取需要表示的時間    var h = date.getHours();//獲取當前小時    var m = date.getMinutes();//獲取當前分鐘    var s=date.getSeconds();//獲取當前秒    var a = ((h/12) *Math.PI*2) - 1.57 + ((m / 60) * 0.524);//根據當前時間計算指針角度    context.save();//保存當前繪制狀態          context.fillStyle='black'; //指定指針中心點的顏色    context.beginPath();//開始創建路徑    context.arc(centerx,centery,3,0,Math.PI * 2, 0);//創建指針中心點的路徑    context.closePath();//關閉路徑    context.fill();//填充指針中心點    context.lineWidth=3;//指定指針寬度       context.fillStyle='darkgray';//指定指針填充顏色    context.strokeStyle='darkgray';//指定指針邊框顏色    context.beginPath();//開始創建路徑    //繪制小時指針    context.arc(centerx,centery,radius - 55, a + 0.01, a, 1);    context.lineTo(centerx,centery);    //繪制分鐘指針    context.arc(centerx,centery,radius - 40, ((m/60) * 6.27) - 1.57, ((m/60) * 6.28) - 1.57, 0);    context.lineTo(canvas.width / 2, canvas.height / 2);    //繪制秒鐘指針    context.arc(centerx,centery,radius - 30, ((s/60) * 6.27) - 1.57, ((s/60) * 6.28) - 1.57, 0);    context.lineTo(centerx,centery);    context.closePath();//關閉路徑    context.fill();//填充指針    context.stroke();//繪制指針邊框    context.restore();//恢復之前保存的繪制狀態    //指定時鐘下部當前時間所用的字符串，文字格式為hh:mm:dd    var hours   = String(h);    var minutes = String(m);    var seconds = String(s);    if (hours.length == 1)   h   = '0' + h;    if (minutes.length == 1) m = '0' + m;    if (seconds.length == 1) s = '0' + s;    var str =h + ':' + m + ':' +s;    //繪制時鐘下部的當前時間    Drawtext(str, centerx, centery + radius + 12);}function Drawtext(text, x, y){    //因為需要使用到坐標平移，所以在平移前線保存當前繪制狀態    context.save();    x -= (context.measureText(text).width / 2);//文字起點橫坐標    y +=9;//文字起點縱坐標    context.beginPath();//開始創建路徑    context.translate(x, y);//平移坐標    context.fillText(text,0,0);//填充文字     context.restore();}</script><style>div{display: -moz-box;display: -webkit-box;-moz-box-pack: center;-webkit-box-pack: center;width:100%;}canvas{background-color:white;}</style> </head>  <body onload="window_onload()">  <div><h1>HTML5使用canvas元素繪制指針式動畫時鐘</h1></div><div><canvas id="canvas" width="200px" height="200px"></canvas><div></body>  </html>

上一篇：html5 Canvas實現的小球彈跳游戲

下一篇：html5圖像放大鏡代碼解析+注釋