首頁 > 開發者 > 網站開發

玩轉html5（四）----使用canvas畫一個時鐘（可以動的哦！）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   blog   http   使用   os   width   

先給個，我畫的比較醜，大家可以自己美化一下，




直接上代碼：

<!DOCTYPE html><meta charset="utf-8"><html>   <body>     <canvas  width="500" height="500" id="clock" >              您的瀏覽器不支援canvas     </canvas>     <script>           //擷取畫布           var clock=document.getElementById(‘clock‘);           //設定繪圖環境           var cxt=clock.getContext(‘2d‘);         function drawClock(){              //清除畫布          cxt.clearRect(0,0,500,500);           //擷取時間，            var now =new Date();            var second =now.getSeconds();            var minute =now.getMinutes();            var hour1 =now.getHours();            //將24小時進位轉為12小時，且為浮點型            var hour=hour1+minute/60;            hour=hour>12 ?hour-12:hour;            //擷取全部時間            var time=now.toLocaleString( );                       //錶盤                //開始新路徑                cxt.beginPath();                cxt.lineWidth=8;                cxt.strokeStyle="blue";                //路徑函數 x,y,r,角度範圍,順時針/逆時針                cxt.arc(250,250,200,0,360,false);                cxt.stroke();                 cxt.closePath();            //刻度,利用旋轉               //時刻度                for(var i=0;i<12;i++){                //儲存目前狀態                    cxt.save();                    //刻度粗細                     cxt.lineWidth=5;                    //刻度顏色                    cxt.strokeStyle="black"                    //設定00點,以畫布中心為00                    cxt.translate(250,250);                    //設定旋轉角度 參數是弧度，角度 0--360 弧度角度*Math.PI/180                    cxt.rotate(i*30*Math.PI/180);                    cxt.beginPath();                    //刻度起始點                    cxt.moveTo(0,-180);                    //刻度結束點                    cxt.lineTo(0,-195);                    cxt.closePath();                    cxt.stroke();                    //將旋轉後的圖片返回原畫布                    cxt.restore();                }               //分刻度                 for(var i=0;i<60;i++){                //儲存目前狀態                    cxt.save();                    //刻度粗細                    cxt.lineWidth=3;                    //刻度顏色                    cxt.strokeStyle="black"                    //設定00點,以畫布中心為00                    cxt.translate(250,250);                    //設定旋轉角度 參數是弧度，角度 0--360 弧度角度*Math.PI/180                    cxt.rotate(i*6*Math.PI/180);                    cxt.beginPath();                    //起始點                    cxt.moveTo(0,-188);                    cxt.lineTo(0,-195);                    cxt.closePath();                    cxt.stroke();                    //將旋轉後的圖片返回原畫布                    cxt.restore();                }            //錶盤中心                cxt.beginPath();                cxt.lineWidth=1;                cxt.strokeStyle="red";                cxt.fillStyle="red";                //路徑函數 x,y,r,角度範圍,順時針/逆時針                cxt.arc(250,250,4,0,360,false);                cxt.fill();                cxt.stroke();                 cxt.closePath();            //時針                //儲存目前狀態                 cxt.save();                 cxt.lineWidth=5;                 cxt.strokeStyle="black";                 //設定異次元空間00點                 cxt.translate(250,250);                 //設定旋轉角度 參數是弧度，角度 0--360 弧度角度*Math.PI/180                 cxt.rotate(hour*30*Math.PI/180);                 cxt.beginPath();                      cxt.moveTo(0,-120);                 cxt.lineTo(0,10);                 cxt.closePath();                 cxt.stroke();                 cxt.restore();            //分針                 cxt.save();                 cxt.lineWidth="3";                 cxt.strokeStyle="black";                 cxt.translate(250,250);                 cxt.rotate(minute*6*Math.PI/180);                 cxt.beginPath();                      cxt.moveTo(0,-150);                 cxt.lineTo(0,15);                 cxt.closePath();                 cxt.stroke();                 cxt.restore();            //秒針                 cxt.save();                 cxt.lineWidth="1.5";                 cxt.strokeStyle="red";                 cxt.translate(250,250);                 cxt.rotate(second*6*Math.PI/180);                 cxt.beginPath();                      cxt.moveTo(0,-160);                 cxt.lineTo(0,20);                 cxt.closePath();                 cxt.stroke();                 //秒針前端小點                 cxt.beginPath();                 //外環為紅色                 cxt.strokeStyle="red";                 //灰色填充                 cxt.fillStyle="gray";                 cxt.arc(0,-145,4,0,360,false);                   cxt.fill();                 cxt.closePath();                 cxt.stroke();                 cxt.restore();            //錶盤中心                cxt.beginPath();                cxt.lineWidth=1;                //外環為紅色                cxt.strokeStyle="red";                //灰色填充                cxt.fillStyle="gray";                //路徑函數 x,y,r,角度範圍,順時針/逆時針                cxt.arc(250,250,4,0,360,false);                cxt.fill();                cxt.stroke();                 cxt.closePath();            //寫時間                    cxt.font="15px 黑體 ";                 cxt.fillStyle="black";                //實心字                cxt.fillText(time,160,150);           }                 //使用setInterval(代碼，毫秒時間)使時鐘轉起來;           drawClock();           setInterval(drawClock,1000);     </script>   </body></html>


本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More