JS+Canvas繪制時(shí)鐘效果
來源：易賢網(wǎng) 閱讀：866 次 日期：2016-06-23 15:50:28
溫馨提示：易賢網(wǎng)小編為您整理了“JS+Canvas繪制時(shí)鐘效果”,方便廣大網(wǎng)友查閱！

這篇文章主要為大家詳細(xì)介紹了基于javascript下使用canvas繪制時(shí)鐘的具體實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了使用canvas繪制時(shí)鐘的具體代碼，供大家參考，具體內(nèi)容如下

代碼如下:

1. clock.html    

<!doctype html>

<html lang="en">

 <head>

 <meta charset="UTF-8">

 <meta name="Description" content="">

 <title>canvas時(shí)鐘</title>

 </head>

 <body>

  <canvas id="canvas" width="300" height="300"></canvas>

  <script>

    var canvas=document.getElementById("canvas");

    var context=canvas.getContext('2d');

    //draw();

    function draw(){

      //得到當(dāng)前系統(tǒng)的時(shí)分秒

      var now=new Date();

      var sec=now.getSeconds();

      var min=now.getMinutes();

      var hour=now.getHours();

      hour>=12&&(hour=hour-12);

      var radius = Math.min(canvas.width/2,canvas.height/2);

      //初始化畫布

      context.save();

      context.clearRect(0,0,canvas.width,canvas.height);

       context.translate(canvas.width/2,canvas.height/2); 

      context.rotate(-Math.PI/2);

      context.save();

      //表框

      //小時(shí)刻度

      context.strokeStyle="black";

      context.fillStyle="black";

      context.lineWidth=3;

      context.lineCap="round";

      context.beginPath();

      for(var i=0;i<12;i++){

        context.rotate(Math.PI/6);

        context.moveTo(radius-30,0);

        context.lineTo(radius-10,0);

      }

      context.stroke();

      context.restore();

      context.save();

      //分鐘刻度

      context.lineWidth=2;

      context.beginPath();

      for(var i=0;i<60;i++){

        if(!i%5==0){

        context.moveTo(radius-15,0);

        context.lineTo(radius-10,0);

        }

        context.rotate(Math.PI/30);

      }

      context.stroke();

      context.restore();

      context.save();

      //畫上時(shí)針

       context.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);

       context.lineWidth=6;

       context.beginPath();

       context.moveTo(-10,0);

       context.lineTo(radius*0.5,0);

       context.stroke();

      context.restore();

      context.save();

       context.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);

   context.strokeStyle="#29A8DE";

   context.lineWidth=4;

   context.lineCap="butt";

   context.beginPath();

   context.moveTo(-20,0);

   context.lineTo(radius*0.7,0);

   context.stroke();

   context.restore();

   context.save();

   context.rotate(sec*Math.PI/30);

   context.strokeStyle="red";

   context.lineWidth=2;

   context.lineCap="butt";

   context.beginPath();

   context.moveTo(-30,0);

   context.lineTo(radius*0.9,0);

   context.stroke();

   context.restore();

   context.save();

      context.lineWidth=4;

       context.strokeStyle="gray";

      context.beginPath();

         context.arc(0,0,radius,0,Math.PI*2,true);

     context.stroke();

     context.restore();

     context.restore();

    }

    window.onload=function(){

      setInterval(draw,1000)

    }

  </script>

 </body>

</html>

2. JavaScript代碼

<script>

    var canvas=document.getElementById("canvas");

    var context=canvas.getContext('2d');

    //draw();

    function draw(){

      //得到當(dāng)前系統(tǒng)的時(shí)分秒

      var now=new Date();

      var sec=now.getSeconds();

      var min=now.getMinutes();

      var hour=now.getHours();

      hour>=12&&(hour=hour-12);

      var radius = Math.min(canvas.width/2,canvas.height/2);

      //初始化畫布

      context.save();

      context.clearRect(0,0,canvas.width,canvas.height);

       context.translate(canvas.width/2,canvas.height/2); 

      context.rotate(-Math.PI/2);

      context.save();

      //表框

      //小時(shí)刻度

      context.strokeStyle="black";

      context.fillStyle="black";

      context.lineWidth=3;

      context.lineCap="round";

      context.beginPath();

      for(var i=0;i<12;i++){

        context.rotate(Math.PI/6);

        context.moveTo(radius-30,0);

        context.lineTo(radius-10,0);

      }

      context.stroke();

      context.restore();

      context.save();

      //分鐘刻度

      context.lineWidth=2;

      context.beginPath();

      for(var i=0;i<60;i++){

        if(!i%5==0){

        context.moveTo(radius-15,0);

        context.lineTo(radius-10,0);

        }

        context.rotate(Math.PI/30);

      }

      context.stroke();

      context.restore();

      context.save();

      //畫上時(shí)針

       context.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);

       context.lineWidth=6;

       context.beginPath();

       context.moveTo(-10,0);

       context.lineTo(radius*0.5,0);

       context.stroke();

      context.restore();

      context.save();

       context.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);

   context.strokeStyle="#29A8DE";

   context.lineWidth=4;

   context.lineCap="butt";

   context.beginPath();

   context.moveTo(-20,0);

   context.lineTo(radius*0.7,0);

   context.stroke();

   context.restore();

   context.save();

   context.rotate(sec*Math.PI/30);

   context.strokeStyle="red";

   context.lineWidth=2;

   context.lineCap="butt";

   context.beginPath();

   context.moveTo(-30,0);

   context.lineTo(radius*0.9,0);

   context.stroke();

   context.restore();

   context.save();

      context.lineWidth=4;

       context.strokeStyle="gray";

      context.beginPath();

         context.arc(0,0,radius,0,Math.PI*2,true);

     context.stroke();

     context.restore();

     context.restore();

    }

    window.onload=function(){

      setInterval(draw,1000)

    }

  </script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

更多信息請(qǐng)查看網(wǎng)絡(luò)編程
易賢網(wǎng)手機(jī)網(wǎng)站地址：JS+Canvas繪制時(shí)鐘效果
由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

2025國(guó)考·省考課程試聽報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào)：滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào)：云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證：（云）人服證字（2023）第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話：0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào)：hfpxwx
咨詢QQ：1093837350（9:00—18:00）版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)