在页面上加入canvas标签:
<body> <canvas id="c1" width="600px" height="600px"> <span>不支持canvas浏览器</span> </canvas> <!--默认:宽300 高150--> </body>
js部分:
绘制秒的刻度的思路是先用oGC.stroke()循环画60个6°的扇形,将它们拼接成一整个圆,然后用oGC.fill()画一个实心的圆,半径比之前拼接的那个圆短,用实心的圆挡住中间多余的线,这样秒的刻度就画出来了,以此类推可以画出分的刻度;
让时钟自动走起来:获取new Date()下的真实时、分、秒时间,然后用‘角度*Math.PI/180=弧度’的公式换算成弧度,赋值给时针、分针、秒针的圆中对应的弧度值,注意:弧度的变化是沿着顺时针的方向增加的,也就是在秒针指向0秒时,它的弧度是-90°。最后设置一个定时器,每隔1s调用一次封装的函数:
<script> window.onload = function(){ var oC = document.getElementById(‘c1‘); var oGC = oC.getContext(‘2d‘); function toDraw(){ var a = 200; var b = 200; var r = 100; oGC.clearRect(0,0,oC.width,oC.height); //获取时间 var oDate = new Date(); var oHour = oDate.getHours(); var oMin = oDate.getMinutes(); var oSec = oDate.getSeconds(); var oHourvalue = (-90 + oHour*30 + oMin/2 )*Math.PI/180; var oMinvalue = (-90 + oMin*6 )*Math.PI/180; var oSecvalue = (-90 + oSec*6 )*Math.PI/180; //绘制秒的刻度 oGC.beginPath(); for(var i=0;i<60;i++){ oGC.moveTo(a,b); oGC.arc(a,b,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false); } oGC.closePath(); oGC.stroke(); oGC.fillStyle = ‘white‘; oGC.beginPath(); oGC.moveTo(a,b); oGC.arc(a,b,r*19/20,0,360*Math.PI/180,false); oGC.closePath(); oGC.fill(); //绘制分的刻度 oGC.lineWidth = 3; oGC.beginPath(); for(var i=0;i<12;i++){ oGC.moveTo(a,b); oGC.arc(a,b,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false); } oGC.closePath(); oGC.stroke(); oGC.fillStyle = ‘white‘; oGC.beginPath(); oGC.moveTo(a,b); oGC.arc(a,b,r*17/20,0,360*Math.PI/180,false); oGC.closePath(); oGC.fill(); //绘制时针 oGC.lineWidth = 4; oGC.beginPath(); oGC.moveTo(a,b); oGC.arc(a,b,r*13/20,oHourvalue,oHourvalue,false); oGC.closePath(); oGC.stroke(); //绘制分针 oGC.lineWidth = 2; oGC.beginPath(); oGC.moveTo(a,b); oGC.arc(a,b,r*18/20,oMinvalue,oMinvalue,false); oGC.closePath(); oGC.stroke(); //绘制秒针 oGC.beginPath(); oGC.moveTo(a,b); oGC.arc(a,b,r*19/20,oSecvalue,oSecvalue,false); oGC.closePath(); oGC.stroke(); }; setInterval(toDraw,1000); }; </script>
时间: 2024-10-05 05:32:46