canvas風景時鐘
阿新 • • 發佈：2019-05-02
代碼 tle int utf-8 cli rest utf ont 添加
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>風景時鐘</title> </head> <body> <canvas id="canvas" width="405" height="405" style="border-radius:50%;"></canvas> <script> var canvas=document.getElementById(‘canvas‘); var cxt=canvas.getContext(‘2d‘); // 創建img圖片對象，用drawImage方法，把圖片放在畫布上 // 代碼中 用clip()方法裁剪圖片 var img=new Image(); img.src="img/Hydrangeas.jpg"; img.onload=function(){ // cxt.drawImage(img,0,0,405,405); clock(); setInterval(clock,1000); } // 將所有代碼用一個函數包起來 function clock(){ // 獲取時間 var date=new Date(); var hour=date.getHours(); var min=date.getMinutes(); var sec=date.getSeconds(); hour=hour>12?hour-12:hour;//用三木運算符換算一下小時數hour=hour+(min/60); min=min+(sec/60); console.log(hour,min,sec) // 每秒執行前，清空一下畫布，就不會照成磊加，重復的情況了 cxt.clearRect(0,0,405,405); cxt.drawImage(img,0,0,405,405);//每次畫布清空之後，把圖片掛上去 // 添加文字----------------------------- cxt.save();//保存以上狀態 cxt.font="20px 微軟雅黑"; cxt.textAlign="center"; cxt.fillStyle="orangered"; cxt.fillText("made in china",202.5,350); cxt.restore(); // 添加時間文字 cxt.save(); cxt.fillStyle="white"; cxt.font="18px w微軟雅黑"; cxt.textAlign="center"; var txt=date.getHours()+":"+date.getMinutes()+":"+date.getSeconds(); cxt.fillText(txt,202.5,320); cxt.restore(); // 繪制時鐘 // 畫圓盤 cxt.save(); cxt.strokeStyle="#00FFFF"; cxt.lineWidth="10"; cxt.beginPath(); cxt.arc(202.5,202.5,200,0,2*Math.PI,false);//順時針 cxt.stroke(); cxt.closePath(); cxt.clip();//裁剪圖片 cxt.restore(); // 畫時刻度 cxt.save();//保存此時的狀態 cxt.translate(202.5,202.5);//將畫布原點移動到圓心點上 cxt.strokeStyle="#ffff00"; cxt.lineWidth=7; for(var i=0;i<12;i++){ cxt.rotate(30*Math.PI/180) cxt.beginPath(); cxt.moveTo(0,-195); cxt.lineTo(0,-175); cxt.closePath(); cxt.stroke(); } cxt.restore();//回到上次保存的狀態 // 畫分刻度 60個 // 將時刻度的代碼拷貝過來，該一下數據 cxt.save(); cxt.translate(202.5,202.5);//將畫布原點移動到圓心點上 cxt.strokeStyle="#ffff00"; cxt.lineWidth=5;//分刻度線條寬度為5，比是刻度細 for(var i=0;i<60;i++){ cxt.rotate(6*Math.PI/180) cxt.beginPath(); cxt.moveTo(0,-195); cxt.lineTo(0,-185); cxt.closePath(); cxt.stroke(); } cxt.restore(); // 畫時針 cxt.save();//保存起點坐標 cxt.lineWidth="7"; cxt.strokeStyle="#00ffff"; cxt.translate(202.5,202.5);//將坐標點移到 圓心(旋轉好操作) cxt.rotate(hour*30*Math.PI/180)//一小時 轉30度 cxt.beginPath(); cxt.moveTo(0,-130); cxt.lineTo(0,-10); cxt.closePath(); cxt.stroke(); cxt.restore(); // 畫分針 cxt.save();//保存起點坐標 cxt.lineWidth="5"; cxt.strokeStyle="#ffff00"; cxt.translate(202.5,202.5);//將坐標點移到 圓心(旋轉好操作) cxt.rotate(min*6*Math.PI/180)//一分鐘轉6度 cxt.beginPath(); cxt.moveTo(0,-150); cxt.lineTo(0,-10); cxt.closePath(); cxt.stroke(); cxt.restore(); // 畫秒針 cxt.save();//保存起點坐標 cxt.lineWidth="3"; cxt.strokeStyle="#ff0000"; cxt.translate(202.5,202.5);//將坐標點移到 圓心(旋轉好操作) cxt.rotate(sec*6*Math.PI/180)//一秒鐘轉6度 cxt.beginPath(); cxt.moveTo(0,-170); cxt.lineTo(0,-10); cxt.closePath(); cxt.stroke(); // 畫秒針上的小圓 cxt.beginPath(); cxt.arc(0,0,7,0,2*Math.PI); cxt.closePath(); cxt.strokeStyle="#ff0000"; cxt.fillStyle="#ffff00"; cxt.fill(); cxt.stroke(); cxt.beginPath(); cxt.arc(0,-140,7,0,2*Math.PI); cxt.closePath(); cxt.strokeStyle="#ff0000"; cxt.fillStyle="#ffff00"; cxt.fill(); cxt.stroke(); cxt.restore(); } // 執行一下 // clock(); // setInterval(clock,1000); </script> </body> </html>
canvas風景時鐘