JS+Canvas繪制動態(tài)時鐘效果

更新時間：2017年11月10日 09:50:41 作者：mr_tangshuai

這篇文章主要為大家詳細(xì)介紹了JS+Canvas繪制動態(tài)時鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Canvas繪制動態(tài)時鐘效果展示的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8" /> 
 <title></title> 
 <style> 
  #mycanvas{ 
  position: absolute; 
  left:50%; 
  margin-left:-250px; 
  border:5px solid #fff; 
  box-shadow: 0 0 10px rgba(0,0,0,0.2); 
  background-color: rgb(58, 179, 255); 
  } 
 </style> 
 </head> 
 <body> 
 <!-- 
  canvas：html5新增的畫布對象，可以在其中繪制任何的圖形，以及線條效果，包括圖片 
  注意canvas的尺寸應(yīng)該通過元素的屬性直接設(shè)置，而不是使用樣式實現(xiàn)(失幀) 
 --> 
 <canvas id="mycanvas" width="500px" height="500px">您的瀏覽器太low了,請切換</canvas> 
 <script> 
  //獲取畫布對象 
  var mycanvas = document.getElementById('mycanvas'); 
  //獲取一個2d繪圖環(huán)境（拿到一支畫筆） 
  var ctx = mycanvas.getContext('2d'); 
  
 function draw(){ 
 
  //獲取系統(tǒng)時間 
  var nowTime = new Date(); 
  var hours = nowTime.getHours();//獲取時 
  var minutes = nowTime.getMinutes();//獲取分 
  var seconds = nowTime.getSeconds();//獲取秒 
  
  //防止小時超過12 
  hours = hours > 12 ? hours-12 : hours; 
  //精準(zhǔn)設(shè)置小時值 
  hours = hours + minutes/60; 
 
  //清除畫布（防止覆蓋） 
  ctx.clearRect(0,0,500,500); 
 
  //初始化畫筆的樣式 
  ctx.lineWidth = 5; //設(shè)置線條的寬度 
  ctx.strokeStyle = '#fff'; //設(shè)置線條顏色 
  
  ctx.beginPath();//開始新的繪圖路徑 
  //設(shè)置一個圓形路徑 
  ctx.arc(250,250,150,0,360,false); 
  //繪制圖形 
  ctx.stroke(); 
  ctx.closePath();//結(jié)束當(dāng)前繪圖路徑 
  
  //繪制刻度(時刻度) 
  for(var i = 0;i < 12;i++){ 
  ctx.beginPath(); 
  ctx.lineWidth = 10; 
  //保存當(dāng)前繪圖環(huán)境 
  ctx.save(); 
  //重置繪制起始位置(將圓心位置重置為0,0) 
  ctx.translate(250,250); 
  //旋轉(zhuǎn)畫布到一定的弧度 弧度=角度*PI/180 
  ctx.rotate(i * 30 * Math.PI / 180); 
  //設(shè)置繪制線條的起始位置 
  ctx.moveTo(0,140); 
  //設(shè)置線條的結(jié)束位置 
  ctx.lineTo(0,150); 
  //繪制路徑 
  ctx.stroke(); 
  //還原初始的繪圖環(huán)境 
  ctx.restore(); 
  ctx.closePath(); 
  } 
  
  //繪制刻度(分刻度) 
  for(var i = 0;i < 60;i++){ 
  ctx.beginPath(); 
  ctx.lineWidth = 3; 
  //保存當(dāng)前繪圖環(huán)境 
  ctx.save(); 
  //重置繪制起始位置(將圓心位置重置為0,0) 
  ctx.translate(250,250); 
  //旋轉(zhuǎn)畫布到一定的弧度 弧度=角度*PI/180 
  ctx.rotate(i * 6 * Math.PI / 180); 
  //設(shè)置繪制線條的起始位置 
  ctx.moveTo(0,142); 
  //設(shè)置線條的結(jié)束位置 
  ctx.lineTo(0,146); 
  //繪制路徑 
  ctx.stroke(); 
  //還原初始的繪圖環(huán)境 
  ctx.restore(); 
  ctx.closePath(); 
  } 
  
  /*繪制時針*/ 
  ctx.beginPath(); 
  ctx.lineWidth = 5; 
  //保存當(dāng)前繪圖環(huán)境 
  ctx.save(); 
  //重置繪制起始位置(將圓心位置重置為0,0) 
  ctx.translate(250,250); 
  //旋轉(zhuǎn)畫布到一定的弧度 弧度=角度*PI/180 
  ctx.rotate(hours * 30 * Math.PI / 180); 
  //設(shè)置繪制線條的起始位置 
  ctx.moveTo(0,10); 
  //設(shè)置線條的結(jié)束位置 
  ctx.lineTo(0,-100); 
  //繪制路徑 
  ctx.stroke(); 
  //還原初始的繪圖環(huán)境 
  ctx.restore(); 
  ctx.closePath(); 
  
  /*繪制分針*/ 
  ctx.beginPath(); 
  ctx.lineWidth = 3; 
  //保存當(dāng)前繪圖環(huán)境 
  ctx.save(); 
  //重置繪制起始位置(將圓心位置重置為0,0) 
  ctx.translate(250,250); 
  //旋轉(zhuǎn)畫布到一定的弧度 弧度=角度*PI/180 
  ctx.rotate(minutes * 6 * Math.PI / 180); 
  //設(shè)置繪制線條的起始位置 
  ctx.moveTo(0,10); 
  //設(shè)置線條的結(jié)束位置 
  ctx.lineTo(0,-120); 
  //繪制路徑 
  ctx.stroke(); 
  //還原初始的繪圖環(huán)境 
  ctx.restore(); 
  ctx.closePath(); 
  
  
  /*繪制秒針*/ 
  ctx.beginPath(); 
  ctx.lineWidth = 1; 
  ctx.strokeStyle = '#f00'; 
  //保存當(dāng)前繪圖環(huán)境 
  ctx.save(); 
  //重置繪制起始位置(將圓心位置重置為0,0) 
  ctx.translate(250,250); 
  //旋轉(zhuǎn)畫布到一定的弧度 弧度=角度*PI/180 
  ctx.rotate(seconds * 6 * Math.PI / 180); 
  //設(shè)置繪制線條的起始位置 
  ctx.moveTo(0,10); 
  //設(shè)置線條的結(jié)束位置 
  ctx.lineTo(0,-135); 
  //繪制路徑 
  ctx.stroke(); 
  //還原初始的繪圖環(huán)境 
  ctx.restore(); 
  ctx.closePath(); 
 } 
  
 setInterval(draw,1000); 
  
 </script> 
 </body> 
</html>

更多JavaScript時鐘特效點擊查看：JavaScript時鐘特效專題

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: