<!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>