JavaScript中Canvas如何編寫炫彩的網(wǎng)頁時(shí)鐘-創(chuàng)新互聯(lián)

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

專業(yè)從事網(wǎng)站制作、成都做網(wǎng)站,高端網(wǎng)站制作設(shè)計(jì),小程序開發(fā),網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團(tuán)隊(duì)竭力真誠(chéng)服務(wù)，采用HTML5建站+CSS3前端渲染技術(shù)，自適應(yīng)網(wǎng)站建設(shè)，讓網(wǎng)站在手機(jī)、平板、PC、微信下都能呈現(xiàn)。建站過程建立專項(xiàng)小組，與您實(shí)時(shí)在線互動(dòng)，隨時(shí)提供解決方案，暢聊想法和感受。

示意圖如下：

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

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv = "Content-Type" content = "text/html"; charsert = "utf-8" />
 <title> 網(wǎng)頁時(shí)鐘 </title>
</head>
<body>
 <h3> Web時(shí)鐘 </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);
  //獲取當(dāng)前時(shí)間
  var data = new Date();
  //獲取秒
  var sec = data.getSeconds();
  //獲取分鐘
  var min = data.getMinutes();
  //獲取小時(shí)
  var hour = data.getHours();
  c.save();
  c.translate(200, 200);
  c.rotate(-Math.PI/2);
  //分針刻度線
  for (var i = 0; i < 60; i++) { //畫60個(gè)刻度線
  c.beginPath();
  c.strokeStyle = "yellowgreen";
  c.lineWidth = 5;
  c.moveTo(117, 0);
  c.lineTo(120, 0);
  c.stroke();
  //每6deg畫一個(gè)分鐘刻度線
  c.rotate(Math.PI/30);
  c.closePath();
  }
  //時(shí)鐘刻度線
  for (var i = 0; i < 12; i++) { //畫60個(gè)刻度線
  c.beginPath();
  c.strokeStyle = "green";
  c.lineWidth = 8;
  c.moveTo(100, 0);
  c.lineTo(120, 0);
  c.stroke();
  //每6deg畫一個(gè)分鐘刻度線
  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();
  //畫時(shí)針
  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是一種動(dòng)態(tài)類型、弱類型的語言，基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性并廣泛用于客戶端網(wǎng)頁開發(fā)的腳本語言，同時(shí)也是一種廣泛用于客戶端Web開發(fā)的腳本語言。它主要用來給HTML網(wǎng)頁添加動(dòng)態(tài)功能，現(xiàn)在JavaScript也可被用于網(wǎng)絡(luò)服務(wù)器，如Node.js。

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

網(wǎng)頁題目：JavaScript中Canvas如何編寫炫彩的網(wǎng)頁時(shí)鐘-創(chuàng)新互聯(lián)
新聞來源：http://muchs.cn/article2/djjiic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站內(nèi)鏈、全網(wǎng)營(yíng)銷推廣、關(guān)鍵詞優(yōu)化、靜態(tài)網(wǎng)站、App設(shè)計(jì)

廣告

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

外貿(mào)網(wǎng)站建設(shè)