JavaScript中Canvas如何編寫炫彩的網(wǎng)頁時鐘

這篇文章給大家分享的是有關(guān)JavaScript中Canvas如何編寫炫彩的網(wǎng)頁時鐘的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

專注于為中小企業(yè)提供做網(wǎng)站、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)懷化免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

示意圖如下：

JavaScript中Canvas如何編寫炫彩的網(wǎng)頁時鐘

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv = "Content-Type" content = "text/html"; charsert = "utf-8" />
 <title> 網(wǎng)頁時鐘 </title>
</head>
<body>
 <h3> Web時鐘 </h3>
 <canvas id = "hello" width = "400" height = "400"
 style = "border:1px solid black"> </canvas>
 <script languagetype = "text/javascript">
 var myCavas = document.getElementById('hello');
 var c = myCavas.getContext('2d');
 function clock() {
  c.clearRect(0, 0, 400, 400);
  //獲取當前時間
  var data = new Date();
  //獲取秒
  var sec = data.getSeconds();
  //獲取分鐘
  var min = data.getMinutes();
  //獲取小時
  var hour = data.getHours();
  c.save();
  c.translate(200, 200);
  c.rotate(-Math.PI/2);
  //分針刻度線
  for (var i = 0; i < 60; i++) { //畫60個刻度線
  c.beginPath();
  c.strokeStyle = "yellowgreen";
  c.lineWidth = 5;
  c.moveTo(117, 0);
  c.lineTo(120, 0);
  c.stroke();
  //每6deg畫一個分鐘刻度線
  c.rotate(Math.PI/30);
  c.closePath();
  }
  //時鐘刻度線
  for (var i = 0; i < 12; i++) { //畫60個刻度線
  c.beginPath();
  c.strokeStyle = "green";
  c.lineWidth = 8;
  c.moveTo(100, 0);
  c.lineTo(120, 0);
  c.stroke();
  //每6deg畫一個分鐘刻度線
  c.rotate(Math.PI/6);
  c.closePath();
  }
  //外表盤
  c.beginPath();
  c.strokeStyle = "pink";
  c.arc(0, 0, 145, 0, Math.PI*2);
  c.lineWidth = 12;
  c.stroke();
  c.closePath();
  //畫時針
  hour = hour > 12 ? hour-12 : hour;
  //console.log(hour);
  c.beginPath();
  c.save();
  //設(shè)置旋轉(zhuǎn)角度，參數(shù)是弧度，角度0-360 弧度角度*Math.PI/180
  c.rotate(Math.PI/6*hour + Math.PI/6*min/60 + Math.PI/6*sec/3600);
  c.strokeStyle = "yellowgreen";
  c.lineWidth = 4;
  c.moveTo(-20, 0);
  c.lineTo(50, 0);
  c.stroke();
  c.restore();
  c.closePath();
  //畫分針
  //console.log(min);
  c.beginPath();
  c.save();
  c.rotate(Math.PI/30*min + Math.PI/30*sec/60);
  c.strokeStyle = "springgreen";
  c.lineWidth = 3;
  c.moveTo(-30, 0);
  c.lineTo(70, 0);
  c.stroke();
  c.restore();
  c.closePath();
  //畫秒針
  c.beginPath();
  c.save();
  c.rotate(Math.PI/30*sec);
  c.strokeStyle = "red";
  c.lineWidth = 2;
  c.moveTo(-40, 0);
  c.lineTo(120, 0);
  c.stroke();
  c.restore();
  c.closePath();
  c.restore();
 }
 clock();
 setInterval(clock, 1000);
 </script>
</body>
</html>

javascript是一種什么語言

javascript是一種動態(tài)類型、弱類型的語言，基于對象和事件驅(qū)動并具有相對安全性并廣泛用于客戶端網(wǎng)頁開發(fā)的腳本語言，同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言。它主要用來給HTML網(wǎng)頁添加動態(tài)功能，現(xiàn)在JavaScript也可被用于網(wǎng)絡(luò)服務(wù)器，如Node.js。

感謝各位的閱讀！關(guān)于“JavaScript中Canvas如何編寫炫彩的網(wǎng)頁時鐘”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

分享文章：JavaScript中Canvas如何編寫炫彩的網(wǎng)頁時鐘
文章起源：http://bm7419.com/article6/igdjog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站建設(shè)、域名注冊、網(wǎng)站收錄、、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)