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

來(lái)源：懂視網(wǎng) 責(zé)編：小OO 時(shí)間：2020-11-27 22:25:52

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

本文實(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，可以在其中繪制任何的圖形，以及線條效果，包括圖片注意canvas的尺寸應(yīng)該通過(guò)元素的屬性直接設(shè)置，0，500，250，150，0，360。

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀本文實(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，可以在其中繪制任何的圖形，以及線條效果，包括圖片注意canvas的尺寸應(yīng)該通過(guò)元素的屬性直接設(shè)置，0，500，250，150，0，360。

本文實(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>

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： js 時(shí)鐘動(dòng)態(tài)時(shí)鐘

熱門(mén)焦點(diǎn)

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

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

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

最新推薦

猜你喜歡

熱門(mén)推薦