欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS+Canvas繪制動(dòng)態(tài)時(shí)鐘效果

 更新時(shí)間：2017年11月10日 09:50:41   作者：mr_tangshuai  
這篇文章主要為大家詳細(xì)介紹了JS+Canvas繪制動(dòng)態(tài)時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Canvas繪制動(dòng)態(tài)時(shí)鐘效果展示的具體代碼，供大家參考，具體內(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新增的畫(huà)布對(duì)象，可以在其中繪制任何的圖形，以及線條效果，包括圖片 
  注意canvas的尺寸應(yīng)該通過(guò)元素的屬性直接設(shè)置，而不是使用樣式實(shí)現(xiàn)(失幀) 
 --> 
 <canvas id="mycanvas" width="500px" height="500px">您的瀏覽器太low了,請(qǐng)切換</canvas> 
 <script> 
  //獲取畫(huà)布對(duì)象 
  var mycanvas = document.getElementById('mycanvas'); 
  //獲取一個(gè)2d繪圖環(huán)境（拿到一支畫(huà)筆） 
  var ctx = mycanvas.getContext('2d'); 
  
 function draw(){ 
 
  //獲取系統(tǒng)時(shí)間 
  var nowTime = new Date(); 
  var hours = nowTime.getHours();//獲取時(shí) 
  var minutes = nowTime.getMinutes();//獲取分 
  var seconds = nowTime.getSeconds();//獲取秒 
  
  //防止小時(shí)超過(guò)12 
  hours = hours > 12 ? hours-12 : hours; 
  //精準(zhǔn)設(shè)置小時(shí)值 
  hours = hours + minutes/60; 
 
  //清除畫(huà)布（防止覆蓋） 
  ctx.clearRect(0,0,500,500); 
 
  //初始化畫(huà)筆的樣式 
  ctx.lineWidth = 5; //設(shè)置線條的寬度 
  ctx.strokeStyle = '#fff'; //設(shè)置線條顏色 
  
  ctx.beginPath();//開(kāi)始新的繪圖路徑 
  //設(shè)置一個(gè)圓形路徑 
  ctx.arc(250,250,150,0,360,false); 
  //繪制圖形 
  ctx.stroke(); 
  ctx.closePath();//結(jié)束當(dāng)前繪圖路徑 
  
  //繪制刻度(時(shí)刻度) 
  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)畫(huà)布到一定的弧度 弧度=角度*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)畫(huà)布到一定的弧度 弧度=角度*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(); 
  } 
  
  /*繪制時(shí)針*/ 
  ctx.beginPath(); 
  ctx.lineWidth = 5; 
  //保存當(dāng)前繪圖環(huán)境 
  ctx.save(); 
  //重置繪制起始位置(將圓心位置重置為0,0) 
  ctx.translate(250,250); 
  //旋轉(zhuǎn)畫(huà)布到一定的弧度 弧度=角度*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)畫(huà)布到一定的弧度 弧度=角度*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)畫(huà)布到一定的弧度 弧度=角度*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時(shí)鐘特效點(diǎn)擊查看：JavaScript時(shí)鐘特效專(zhuān)題

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

相關(guān)文章

最新評(píng)論