本文實(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新增的畫布對(duì)象，可以在其中繪制任何的圖形，以及線條效果，包括圖片 注意canvas的尺寸應(yīng)該通過(guò)元素的屬性直接設(shè)置，而不是使用樣式實(shí)現(xiàn)(失幀) --> <canvas id="mycanvas" width="500px" height="500px">您的瀏覽器太low了,請(qǐng)切換</canvas> <script> //獲取畫布對(duì)象 var mycanvas = document.getElementById('mycanvas'); //獲取一個(gè)2d繪圖環(huán)境（拿到一支畫筆） 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; //清除畫布（防止覆蓋） ctx.clearRect(0,0,500,500); //初始化畫筆的樣式 ctx.lineWidth = 5; //設(shè)置線條的寬度 ctx.strokeStyle = '#fff'; //設(shè)置線條顏色 ctx.beginPath();//開始新的繪圖路徑 //設(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)畫布到一定的弧度 弧度=角度*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(); } /*繪制時(shí)針*/ 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>
新聞熱點(diǎn)
疑難解答
圖片精選
