Canvas：时钟

2018-12-20 09:34:41来源：博客园阅读 ()

这个时钟是将钟盘的圆心点移到了 canvas 画布中心点。以方便后面的方位计算

ctx.translate(width/2,height/2);

现定义一个圆盘来显出这个时钟的基本位置

ctx.save()
                ctx.beginPath();
                ctx.arc(0,0,r+90,0,2*Math.PI,false);
                ctx.lineWidth = 200;
                ctx.closePath();
                ctx.drawImage(img,-r,-r,width,height);
                var grd = ctx.createLinearGradient(0,0,0,r);
                var r1 = Math.floor(Math.random()*256);19:48:19
                var g1 = Math.floor(Math.random()*256);
                var b1 = Math.floor(Math.random()*256);
                grd.addColorStop(0,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
                grd.addColorStop(1,"rgb(" + r1 + "," + g1 + "," + b1 + ")");
                ctx.strokeStyle = grd; 
                ctx.stroke();

我在这里面添加了线性渐变来改变颜色，如果感觉颜色太过绚丽可以注释掉不写。

 var grd1 = ctx.createLinearGradient(0,0,0,r);
                    var r3 = Math.floor(Math.random()*256);
                    var g3 = Math.floor(Math.random()*256);
                    var b3 = Math.floor(Math.random()*256);
                    grd1.addColorStop(0,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
                    grd1.addColorStop(1,"rgb(" + r3 + "," + g3 + "," + b3 + ")");

然后利用到了三角函数原理来计算出钟表中刻度的位置；

var x = Math.cos(Math.PI/6*i)*(r-30);
var y = Math.sin(Math.PI/6*i)*(r-30);

然后通过计算来显示出时刻和刻度的分布位置

//                              时刻
                
                ctx.beginPath();
                var arr = ["III","IV","V","VI","VII",'VIII',"IX",'X','XI','XII','I','II'];
                ctx.font = "20px Arial";
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
                var grd2 = ctx.createLinearGradient(0,0,0,r);
                var r2 = Math.floor(Math.random()*256);
                var g2 = Math.floor(Math.random()*256);
                var b2 = Math.floor(Math.random()*256);
                grd2.addColorStop(0,"rgb(" + r2 + "," + g2 + "," + b2 + ")");
                grd2.addColorStop(1,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
                ctx.fillStyle = grd2;
                ctx.fill();
                ctx.closePath();
                for (var i = 0;i < arr.length; i ++){
                    var x = Math.cos(Math.PI/6*i)*(r-30);
                    var y = Math.sin(Math.PI/6*i)*(r-30);
                    ctx.fillText(arr[i],x,y);
                }
                
//                刻度
                for(var j =0;j < 60;j ++){
                    var x = Math.cos(Math.PI/30*j)*(r-15);
                    var y = Math.sin(Math.PI/30*j)*(r-15);
                    ctx.beginPath();
                    ctx.arc(x,y,2,0,2*Math.PI,false);
                    var grd1 = ctx.createLinearGradient(0,0,0,r);
                    var r3 = Math.floor(Math.random()*256);
                    var g3 = Math.floor(Math.random()*256);
                    var b3 = Math.floor(Math.random()*256);
                    grd1.addColorStop(0,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
                    grd1.addColorStop(1,"rgb(" + r3 + "," + g3 + "," + b3 + ")");
                    ctx.fillStyle = grd1;
                    ctx.fill();
                }
                ctx.closePath();
            }


接下来就是时针、分针和秒针
在这里值得一提的是，秒针在移动的时候是带着分针和时针一起转动的，所以在计算时针的转动角度时，要把分针的也计算在一起，不过分针的计算角度要更新下

var HOUR = Math.PI/6*hour;
var MINU = Math.PI/6/60*minu;

同样的在计算分针时，要带上秒针

var MINU = Math.PI/30*minu;
var SECON = Math.PI/1800*secon;

这样，我们在运行时，就可以看出，分针和时针都是不停的在运转的

//                     小时
            function timh(hour,minu){
                ctx.save();
                ctx.beginPath();
                ctx.lineWidth = 6;
                var HOUR = Math.PI/6*hour;
                var MINU = Math.PI/6/60*minu;
                ctx.rotate(HOUR+MINU);
                ctx.moveTo(0,10);
                ctx.lineTo(0,-r/2);
                ctx.lineCap = "round";
                var grd3 = ctx.createLinearGradient(0,0,0,r);
                var r3 = Math.floor(Math.random()*256);
                var g3 = Math.floor(Math.random()*256);
                var b3 = Math.floor(Math.random()*256);
                grd3.addColorStop(0,"rgb(" + r3 + "," + g3 + "," + b3 + ")");
                grd3.addColorStop(1,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
                ctx.strokeStyle = grd3;
                ctx.stroke();
                ctx.restore();
            }
            
//            分钟
            function timm(minu,secon){
                ctx.save();
                ctx.beginPath();
                ctx.lineWidth = 3;
                var MINU = Math.PI/30*minu;
                var SECON = Math.PI/1800*secon;
                ctx.rotate(MINU+SECON);
                ctx.moveTo(0,10);
                ctx.lineTo(0,-r+50);
                ctx.lineCap = "round";
                var grd4 = ctx.createLinearGradient(0,0,0,r);
                var r4 = Math.floor(Math.random()*256);
                var g4 = Math.floor(Math.random()*256);
                var b4 = Math.floor(Math.random()*256);
                grd4.addColorStop(0,"rgb(" + r4 + "," + g4 + "," + b4 + ")");
                grd4.addColorStop(1,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
                ctx.strokeStyle = grd4;
                ctx.stroke();
                ctx.restore();
            }
            
//            秒钟
            function tims(secon){
                ctx.save();
                ctx.beginPath();
                var SECON = Math.PI/30*secon;
                ctx.rotate(SECON);
                ctx.fillStyle = "red"
                ctx.moveTo(-2,20);
                ctx.lineTo(2,20);
                ctx.lineTo(1,-r+20);
                ctx.lineTo(-1,-r+20);
                ctx.closePath();
                ctx.fill();
                ctx.restore();
            }

在最后为了真实一点，在钟盘中心增加一个固定

function ding(){
                ctx.beginPath();
                ctx.fillStyle = "#fff";
                ctx.arc(0,0,3,0,Math.PI*2);
                ctx.closePath();
                ctx.fill();
            }

最后在添加无限定时器运转

function cleann(){
                ctx.clearRect(-r,-r,width,height);
                var timer = new Date();
                var hour = timer.getHours();
                var minu = timer.getMinutes();
                var secon = timer.getSeconds();
                
                fun();
                timh(hour,minu);
                timm(minu,secon);
                tims(secon);
                ding();
                ctx.restore();
            }setInterval(cleann,1000);

效果（背景图片可以自行加入）