Canvas--创意时钟

xiaoxiao2021-04-15 37

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> canvas{ margin: 0 auto; display: block; background: #cccccc; } </style> <script type="text/javascript"> //弧度 function d2a(n){ return n*Math.PI/180; } //随机数 function rnd(n,m){ return Math.floor(Math.random()*(m-n)+n); } //补零 function toDou(iNum){ if(iNum<10){return '0'+iNum;} else{return ''+iNum;} } document.addEventListener('DOMContentLoaded',function(){ var oC=document.querySelector('canvas'); var gd=oC.getContext('2d'); var cx=400; var cy=300; function drawArc(start,end,r,color){ var start=start-90; var end=end-90; //画圆 gd.beginPath(); gd.lineWidth=20; gd.strokeStyle=color||'#000'; gd.arc(cx,cy,r,d2a(start),d2a(end),false); gd.stroke(); } function tick(){ gd.clearRect(0,0,oC.width,oC.height); //清空画布 //获取时间对象 var oDate=new Date(); var h=oDate.getHours(); var m=oDate.getMinutes(); var s=oDate.getSeconds(); var ms=oDate.getMilliseconds(); drawArc(0,s*6+ms/1000*6,120,'#f00'); drawArc(0,m*6+s/60*6,100,'#399'); drawArc(0,h*30+m/60*30,80,'#000'); //加文字 gd.beginPath(); gd.lineWidth=1; gd.textAlign='center'; gd.font='30px 黑体'; gd.strokeText('时钟',cx,cy-140); gd.beginPath(); gd.fillText(toDou(h)+':'+toDou(m)+':'+toDou(s),cx,cy); } tick(); setInterval(tick,16); },false); </script> </head> <body> <canvas width="800" height="600"></canvas> </body> </html> 效果图

转载请注明原文地址: https://ju.6miu.com/read-670921.html

技术

最新回复(0)