canvas实现的时钟效果

Posted 2020-07-10 不吃鱼的猫·学习笔记

最近在网上看到了一个css3实现的可爱时钟，觉得很nice,然后就想着用canvas试试实现这个时钟效果。

首先，要实现时钟需要先计算时钟上的数字应该占整个圆的大小。

因为一个圆是360度，所以数字之间就是360/12=30度，所以我在圆上画出数字的代码是这样的：

            drawNumber:function(){
                this.context.save();
                for(var i = 0;i < 12; i++){
                    var angle = i*30;
                    angle = angle*Math.PI/180;
                    var n = (i+3 > 12) ? i+3-12:i+3;
                    var x = Math.round(Math.cos(angle)*(this.r-20));
                    var y = Math.round(Math.sin(angle)*(this.r-20));
                    this.context.fillStyle="#8DA6B8";
                    this.context.font = "bold 20px Calibri";
                    this.context.textAlign = "center";
                    this.context.textBaseline = "middle";
                    this.context.fillText(n,x+this.widths/2,y+this.heights/2);
                }
                this.context.restore();
            },

因为Math.cos()和Math.sin()接受的都是弧度制，所以需要把30度转换成对应的弧度喔。

其次，我们来看看怎么画时钟上的时针、分针以及秒针。

因为时针、分针、秒针要随着时间的改变而改变，所以我们需要获取当前时间以及context.translate(this.widths/2,this.heights/2);context.rotate(rotate);来对时针、分针、秒针的旋转。

其中时针的旋转弧度是：hrotate = (h*30+(m/60)*30+(s/3600)*30)*Math.PI/180; （ps:每过一个小时，时针就需要旋转30度）

分针的旋转弧度是：mrotate = (m*6+(s/60)*6)*Math.PI/180;（ps:每过一分钟，分针就需要旋转6度）

秒针的旋转弧度是：srotate = (s*6)*Math.PI/180;（ps:每过一秒，秒针就需要旋转6度）

　　　　　　　　　　  var time = new Date();
                var h = time.getHours();
                var m = time.getMinutes();
                var s = time.getSeconds();
                var hrotate = (h*30+(m/60)*30+(s/3600)*30)*Math.PI/180;
                var mrotate = (m*6+(s/60)*6)*Math.PI/180;
                var srotate = (s*6)*Math.PI/180;
                // console.log(h + ‘:‘ + m + ‘:‘ + s);
                
                //时针
                this.context.save();
                this.context.translate(this.widths/2,this.heights/2);
                this.context.save();
                this.context.rotate(hrotate);
                this.context.beginPath();
                this.context.lineCap="round";
                this.context.moveTo(0,0);
                this.context.lineTo(0,-40);
                this.context.strokeStyle="#1AA9D8";
                this.context.lineWidth=6;
                this.context.stroke();
                this.context.closePath();
                this.context.restore();
                //分针
                this.context.save();
                this.context.rotate(mrotate);
                this.context.beginPath();
                this.context.lineCap="round";
                this.context.moveTo(0,0);
                this.context.lineTo(0,-50);
                this.context.strokeStyle="#23BCEF";
                this.context.lineWidth=4;
                this.context.stroke();
                this.context.closePath();
                this.context.restore();
                //秒针
                this.context.save();
                this.context.rotate(srotate);
                this.context.beginPath();
                this.context.lineCap="round";
                this.context.moveTo(0,0);
                this.context.lineTo(0,-65);
                this.context.strokeStyle="#23BCEF";
                this.context.lineWidth=1;
                this.context.stroke();
                this.context.closePath();    
                this.context.restore();
                this.context.restore();

 

最后，使用setInterval()方法来实现画布的周期性更新，在每次绘画之前需要先将画布清空哟，要不然，嘿嘿，你懂的。

这样我们的时钟就完成了，canvas是不是也很赞呀！好了，canvas时钟就讲到这啦，有什么讲的不对的地方希望各位大神指正，小女子在此谢过！