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

這篇文章主要介紹了JS+Canvas如何繪制動態(tài)時鐘效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司網(wǎng)絡(luò)公司擁有十年的成都網(wǎng)站開發(fā)建設(shè)經(jīng)驗，1000+客戶的共同信賴。提供成都網(wǎng)站設(shè)計、成都做網(wǎng)站、網(wǎng)站開發(fā)、網(wǎng)站定制、外鏈、建網(wǎng)站、網(wǎng)站搭建、成都響應(yīng)式網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計師打造企業(yè)風格，提供周到的售前咨詢和貼心的售后服務(wù)

具體內(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; 
  //精準設(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é)束當前繪圖路徑 
  
  //繪制刻度(時刻度) 
  for(var i = 0;i < 12;i++){ 
  ctx.beginPath(); 
  ctx.lineWidth = 10; 
  //保存當前繪圖環(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; 
  //保存當前繪圖環(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; 
  //保存當前繪圖環(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; 
  //保存當前繪圖環(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'; 
  //保存當前繪圖環(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是什么

JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動態(tài)效果，讓網(wǎng)頁更加美觀。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“JS+Canvas如何繪制動態(tài)時鐘效果”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!

名稱欄目：JS+Canvas如何繪制動態(tài)時鐘效果
網(wǎng)頁地址：http://chinadenli.net/article36/iecjsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、建站公司、App開發(fā)、品牌網(wǎng)站制作、全網(wǎng)營銷推廣、Google

聲明：本網(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)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

JavaScript是什么