<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="clock" width="500px" height="500px" style="border:1px solid #000"></canvas> <script> var canvas=document.getElementById("clock"); var ctx=canvas.getContext("2d"); function drawClock(){ // 获取系统时间 var today=new Date(); var hour=today.getHours(); var min=today.getMinutes(); var sec=today.getSeconds(); // alert(hour); hour>12?hour-12:hour; // 清空画布 ctx.clearRect(0,0,canvas.width,canvas.height); //绘制时刻度 ctx.strokeStyle="yellow"; ctx.lineWidth=10; ctx.beginPath(); //起始一条路径 ctx.arc(250,250,200,0,Math.PI*2); ctx.stroke(); ctx.closePath();//结束路径 ctx.clip();//按圆框裁剪时钟背景图 // 绘制表盘背景 var img =new Image(); img.src="image/1.jpg"; ctx.drawImage(img,40,40,420,420); for(var i=0;i<12;i++){ ctx.save(); ctx.strokeStyle="yellow"; ctx.lineWidth=7; ctx.translate(250,250);//设置原点 ctx.rotate(30*i*Math.PI/180);//设置旋转角度,隔30度画一个分刻度 ctx.beginPath(); ctx.moveTo(0,-197); ctx.lineTo(0,-175); ctx.stroke(); ctx.closePath(); ctx.restore(); } //绘制分刻度 for(var i=0;i<60;i++){ ctx.save(); ctx.strokeStyle="yellow"; ctx.lineWidth=5; ctx.translate(250,250);//设置原点 ctx.rotate(6*i*Math.PI/180);//设置旋转角度,隔30度画一个分刻度 ctx.beginPath(); ctx.moveTo(0,-195); ctx.lineTo(0,-185); ctx.stroke(); ctx.closePath(); ctx.restore(); } // 绘制时针 ctx.save(); ctx.strokeStyle="pink"; ctx.lineWidth=7; ctx.translate(250,250); ctx.rotate(hour*30*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,-130); ctx.lineTo(0,0); ctx.stroke(); ctx.closePath(); ctx.restore(); //绘制分针 ctx.save(); ctx.strokeStyle="pink"; ctx.lineWidth=4; ctx.translate(250,250); ctx.rotate(min*6*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,-150); ctx.lineTo(0,0); ctx.stroke(); ctx.closePath(); ctx.restore(); // 绘制秒针 ctx.save(); ctx.strokeStyle="pink"; ctx.lineWidth=3; ctx.translate(250,250); ctx.rotate(sec*6*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,-170); ctx.lineTo(0,0); ctx.stroke(); ctx.closePath(); // cxt.restore(); // 美化表盘,中间小圆 ctx.beginPath(); ctx.arc(0,0,7,0,Math.PI*2); ctx.fillStyle="yellow"; ctx.fill(); ctx.strokeStyle="pink"; ctx.stroke(); ctx.closePath(); // 秒针上的小圆 ctx.beginPath(); ctx.arc(0,-140,7,0,Math.PI*2); ctx.fillStyle="yellow"; ctx.fill(); ctx.strokeStyle="pink"; ctx.stroke(); ctx.closePath(); ctx.restore(); //定位时间 var h=hour; var m=min; var s=sec; var one=h>9?h:('0'+h); var two=m>9?m:('0'+m); var three=s>9?s:('0'+s); ctx.beginPath(); ctx.fillStyle='rgb(60,253,125)'; ctx.font='20px 微软雅黑'; ctx.fillText(one+':'+two+':'+three,210,380); ctx.closePath(); //文本 var str = "time keeping"; ctx.font = "20px 宋体"; ctx.fillStyle = "#eee"; ctx.fillText(str ,190,410); } drawClock(); setInterval(drawClock,1000);//设置定时器 </script> </body> </html>
canvas之可爱的时钟
最新推荐文章于 2021-03-10 10:54:09 发布