html5 画布绘制时钟

用Html5实现时钟,包括转盘时钟和电子时钟,显示当前日期时间

绘制步骤:

(1)先获取画布,设置画布的大小;

(2)在js中获取画布对象,获取画布的画笔对象,设置画笔的一些属性;

(3)获取系统当前时间,转换成时分秒,用变量保存下来;

(4)先画分钟刻度线,每6°画一条线,共60条刻度线(循环);

(5)画时钟刻度线,每30°画一条线,相对分针长一点粗一点,共12条线

(6)画时针、分针和秒针,时针最短最粗,秒针最细最长,根据当前时间把时针,分针,秒针旋转到相应位置;

(7)接着绘制数字时钟,根据当前的时间在画布上绘制文字,显示时间日期(年月日)星期几;

(8)调用函数,并设置定时器定时执行函数,实现动态效果。

效果图:


源代码:

<!DOCTYPEhtml>

<html>

    <head>

       <meta charset="UTF-8">

       <title>时钟</title>

       <style type="text/css">

           canvas{

              margin: 100px 80px;

       }

       </style>

    </head>

    <body>

       <canvas id="clock"width="1000" height="200"></canvas>

       <scripttype="text/javascript">

           var canvas =document.querySelector("canvas");

           canvas.style.background ="blue";

           var g = canvas.getContext("2d");  

          

           //绘制转盘时钟

              function drawArcClock() {

              g.clearRect(0, 0, 100, 100);

              var data = new Date();

              var sec = data.getSeconds();

              var min = data.getMinutes();

              var hour = data.getHours();

              g.save();

              g.translate(50, 50);

              g.rotate(-Math.PI / 2);

              //分钟刻度线

              for(var i = 0; i < 60; i++) {//画60个刻度线

                  g.beginPath();

                  g.strokeStyle ="white";

                  g.lineWidth = 1;

                  g.moveTo(50, 0);

                  g.lineTo(45, 0);

                  g.stroke();

                  g.rotate(Math.PI / 30); //每个6deg画一个时钟刻度线

                  g.closePath();

              }

              //时钟刻度线

              for(var i = 0; i < 12; i++) {//画12个刻度线

                  g.beginPath();

                  g.strokeStyle ="white";

                  g.lineWidth = 2;

                  g.moveTo(50, 0);

                  g.lineTo(40, 0);

                  g.stroke();

                  g.rotate(Math.PI / 6); //每个30deg画一个时钟刻度线

                  g.closePath();

              }

             

              //画时针

              hour = hour > 12 ? hour - 12 :hour;

              g.beginPath();

              g.save();

              g.rotate(Math.PI / 6 * hour +Math.PI / 6 * min / 60 + Math.PI / 6 * sec / 3600);

              g.strokeStyle = "white";

              g.lineWidth = 3;

              g.moveTo(-10, 0);

              g.lineTo(30, 0);

              g.stroke();

              g.restore();

              g.closePath();

              //画分针

              g.beginPath();

              g.save();

              g.rotate(Math.PI / 30 * min +Math.PI / 30 * sec / 60);

              g.strokeStyle = "white";

              g.lineWidth = 2;

              g.moveTo(-5, 0);

              g.lineTo(30, 0);

              g.stroke();

              g.restore();

              g.closePath();

              //画秒针

              g.beginPath();

              g.save();

              g.rotate(Math.PI / 30 * sec);

              g.strokeStyle = "red";

              g.lineWidth = 1;

              g.moveTo(-10, 0);

              g.lineTo(35, 0);

              g.stroke();

              g.restore();

              g.closePath();

              g.restore();

           }

           //绘制数字时钟

           function drawNumClock(){

              g.clearRect(100, 0, 1200, 200);

              var data = new Date();

              var str = data.getFullYear()+"年"+(data.getMonth()+1)+"月"+data.getDate()+"日";

              var sec = data.getSeconds();

              var min = data.getMinutes();

              var hour = data.getHours();

              var day =data.getDay();         //获取当前星期

              if(day == 0){

                  day = "日";

              }

              else if(day==1){

                  day = "一";

              }

              else if(day==2){

                  day = "二";

              }

              else if(day==3){

                  day = "三";

              }

              else if(day==4){

                  day = "四";

              }

              else if(day==5){

                  day = "五";

              }

              else if(day==6){

                  day = "六";

              }

              g.fillStyle = "white";

              g.font = "100px '楷体'";

              g.lineWidth = "bolder";//字体加粗

              g.beginPath();

              g.fillText(hour,200,120);

              g.fillText(":",300,110);

              g.fillText(min,340,120);

              g.font = "70px '楷体'";

              g.fillText(sec,470,120);

              g.font = "70px '楷体'";

              g.fillText("星期",580,120);

              g.fillText(day,730,120);

              g.font = "50px '楷体'";

              g.fillText(str,580,180);

           }

           drawArcClock();

           drawNumClock();

           setInterval(drawArcClock, 1000);

           setInterval(drawNumClock, 1000);

       </script>

    </body>

</html>

 

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,以下是一个简单的用画布绘制时钟的示例代码: ```html <!DOCTYPE html> <html> <head> <title>Canvas Clock</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="clock" width="400" height="400"></canvas> <script> const canvas = document.getElementById("clock"); const ctx = canvas.getContext("2d"); const radius = canvas.width / 2; ctx.translate(radius, radius); radius *= 0.9; drawClock(); function drawClock() { drawFace(ctx, radius); drawNumbers(ctx, radius); drawTime(ctx, radius); } function drawFace(ctx, radius) { ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2*Math.PI); ctx.fillStyle = "white"; ctx.fill(); ctx.lineWidth = radius*0.1; ctx.strokeStyle = "black"; ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); ctx.fillStyle = "#333"; ctx.fill(); } function drawNumbers(ctx, radius) { ctx.font = radius*0.15 + "px arial"; ctx.textBaseline = "middle"; ctx.textAlign = "center"; for(let num = 1; num <= 12; num++) { const angle = num * Math.PI / 6; const x = radius * 0.85 * Math.sin(angle); const y = -radius * 0.85 * Math.cos(angle); ctx.fillText(num.toString(), x, y); } } function drawTime(ctx, radius) { const now = new Date(); let hour = now.getHours(); let minute = now.getMinutes(); let second = now.getSeconds(); hour = hour % 12; hour = (hour*Math.PI/6) + (minute*Math.PI/(6*60)) + (second*Math.PI/(360*60)); drawHand(ctx, hour, radius*0.5, radius*0.07); minute = (minute*Math.PI/30) + (second*Math.PI/(30*60)); drawHand(ctx, minute, radius*0.8, radius*0.07); second = (second*Math.PI/30); drawHand(ctx, second, radius*0.9, radius*0.02); } function drawHand(ctx, pos, length, width) { ctx.beginPath(); ctx.lineWidth = width; ctx.lineCap = "round"; ctx.moveTo(0, 0); ctx.rotate(pos); ctx.lineTo(0, -length); ctx.stroke(); ctx.rotate(-pos); } setInterval(drawClock, 1000); // Update the clock every second </script> </body> </html> ``` 这个示例代码中,我们首先定义了一个画布,并且设置了它的宽高和边框。然后我们在 JavaScript 中获取到这个画布,并且获取到它的上下文,然后设置画布的中心点和半径。 接着,我们定义了几个绘制时钟的函数:`drawFace` 用来绘制时钟的表盘,`drawNumbers` 用来绘制时钟的数字,`drawTime` 用来绘制时钟的指针,`drawHand` 用来绘制单个指针。 最后,我们在 `drawClock` 函数中调用这些函数来绘制时钟,并且通过 `setInterval` 函数来每秒更新一次时钟
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值