欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

利用Canvas制作时钟

程序员文章站 2022-04-08 13:28:57
...
首先第一步。
<canvas id="myCanvas" style="border:1px red solid" width="300px"; height="300px";></canvas>

然后

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");

定义一个绘制时钟的函数通过计时器每秒调用一次,默认首先通过函数名调用一次然后通过计时器调用。因为如果直接一开始用计时器调用就会比实际时间慢1s

drawfun();
setInterval(drawfun,1000);

函数体内容:

1).每次调用前清除一次画布,所以放在第一行。

//清除画布ctx.clearRect(0, 0, 300, 300);

2).绘制时钟的外边框和圆心,很容易就不解释了。

  //时钟框和圆心  ctx.beginPath();
  ctx.arc(150,150,100,0,2*Math.PI);
  ctx.stroke();
  ctx.beginPath();
  ctx.fillStyle="black";
  ctx.arc(150,150,3,0,2*Math.PI);
  ctx.fill();

3).绘制小时和分钟的刻度。

//绘制时分刻度
       for(var i=0;i<60;i++){
           ctx.save();
           ctx.beginPath();           //让画布以圆心为原点
           ctx.translate(150,150);           //每秒之间的角度
           ctx.rotate(Math.PI*2/60*i);           //开始绘制刻度
           ctx.moveTo(0,-99);           //时钟刻度
           if(i%5==0){
               ctx.strokeStyle = '#333';
               ctx.lineWidth = 3;
               ctx.lineTo(0,-87);
           }else {//分钟刻度
               ctx.strokeStyle = '#ccc';
               ctx.lineWidth = 2;
               ctx.lineTo(0,-90);
           }
           ctx.stroke();
           ctx.closePath();
           ctx.restore();
       }

4).绘制小时数

//绘制小时数
       for(var i=0;i<60;i++){
            ctx.beginPath();            //获取每秒秒钟之间的弧度算出小时数的坐标
            var hudu = (2*Math.PI / 360) * 6 * i;            
            var X = 150 + Math.sin(hudu) * 80 - 3.5;            
            var Y = 150 - Math.cos(hudu) * 80 + 5; //注意此处是“-”号,因为我们要得到的Y是相对于(0,0)而言的。
            if(i%5==0){                if(i==0){
                    ctx.fillText("12",X-3,Y);
                }else{
                    ctx.fillText("" + i / 5 + "",X,Y);
                }
                ctx.stroke();
            }
       }

5).最后绘制时分秒指针

             var date = new Date();       
             var Hour = date.getHours();       //获取小时数(0-23)
       var Minute = date.getMinutes();     //获取分钟数(0-59)
       var Second = date.getSeconds();     //获取秒数(0-59)
       //绘制秒钟       ctx.save();
       ctx.beginPath();       //修改画布原点,以圆心为原点
       ctx.translate(150, 150);       //指针每秒旋转度数
       ctx.rotate(Math.PI * 2 / 60 * Second);
       ctx.strokeStyle = 'red';
       ctx.lineWidth = 1;
       ctx.moveTo(0, 20);
       ctx.lineTo(0, -70);
       ctx.stroke();
       ctx.closePath();
       ctx.restore();       //绘制分钟       
       ctx.save();
       ctx.beginPath();
       ctx.translate(150, 150);       //当前分钟的角度加上每秒分钟旋转的角度,如果不加分钟只会当秒钟过整分的时候才会旋转
       ctx.rotate(Math.PI * 2 / 60 * Minute+Math.PI * 2 / 60/60 * Second);
       ctx.strokeStyle = 'black';
       ctx.lineWidth = 1.5;
       ctx.moveTo(0, 10);
       ctx.lineTo(0, -60);
       ctx.stroke();
       ctx.closePath();
       ctx.restore();       //绘制时钟       
       ctx.save();
       ctx.beginPath();
       ctx.translate(150, 150);       //和分钟一样。
       ctx.rotate(Math.PI * 2 / 12 * Hour+Math.PI * 2 / 60/12 * Minute+Math.PI * 2 / 60/60/12 * Second);
       ctx.strokeStyle = 'black';
       ctx.lineWidth = 2.5;
       ctx.moveTo(0, 8);
       ctx.lineTo(0, -35);
       ctx.stroke();
       ctx.closePath();
       ctx.restore();

以上就是利用Canvas制作时钟的详细内容,更多请关注其它相关文章!