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

專業(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)。建站過(guò)程建立專項(xiàng)小組，與您實(shí)時(shí)在線互動(dòng)，隨時(shí)提供解決方案，暢聊想法和感受。

示意圖如下：

 
 


 
 Web時(shí)鐘 
  
 
 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);
 

javascript是一種什么語(yǔ)言

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

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

網(wǎng)頁(yè)名稱：JavaScript中Canvas如何編寫炫彩的網(wǎng)頁(yè)時(shí)鐘-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://weahome.cn/article/djjiic.html