Canvas：时钟

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

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

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

0,r+90,2*Math.PI,= 200-r,- grd = ctx.createLinearGradient(0,0 r1 = Math.floor(Math.random()*256 g1 = Math.floor(Math.random()*256 b1 = Math.floor(Math.random()*2560,"rgb(" + r0 + "," + g0 + "," + b0 + ")"1,"rgb(" + r1 + "," + g1 + "," + b1 + ")"=

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

 var grd1 = ctx.createLinearGradient(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," + 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);

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

arr = ["III","IV","V","VI","VII",'VIII',"IX",'X','XI','XII','I','II'= "20px Arial"= "center"= "middle" grd2 = ctx.createLinearGradient(0,r); r2 = Math.floor(Math.random()*256 g2 = Math.floor(Math.random()*256 b2 = Math.floor(Math.random()*2560,"rgb(" + r2 + "," + g2 + "," + b2 + ")"1," + b0 + ")"= ( i = 0;i < arr.length; i ++ x = Math.cos(Math.PI/6*i)*(r-30); y = Math.sin(Math.PI/6*i)*(r-30); // 刻度
for(var j =0;j < 60;j ++){
var x = Math.cos(Math.PI/30j)(r-15);
var y = Math.sin(Math.PI/30j)(r-15);
 ctx.beginPath();
ctx.arc(x,y,2,false);
var grd1 = ctx.createLinearGradient(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," + b0 + ")");
grd1.addColorStop(1," + 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;

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

= 6 HOUR = Math.PI/6*hour; MINU = Math.PI/6/60*+0,100,-r/2); ctx.lineCap = "round" grd3 = ctx.createLinearGradient(0,r); r3 = Math.floor(Math.random()*256 g3 = Math.floor(Math.random()*256 b3 = Math.floor(Math.random()*2560," + b3 + ")"1," + b0 + ")"=// 分钟
function timm(minu,secon){
ctx.save();
ctx.beginPath();
ctx.lineWidth = 3;
var MINU = Math.PI/30minu;
var SECON = Math.PI/1800secon;
ctx.rotate(MINU+SECON);
ctx.moveTo(0,-r+50);
ctx.lineCap = "round";
var grd4 = ctx.createLinearGradient(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," + 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();
}

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

= "#fff"0,3,Math.PI*2

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

-r,height); timer = hour = minu = secon =

            fun();
            timh(hour,minu);
            timm(minu,secon);
            tims(secon);
            ding();
            ctx.restore();
        }setInterval(cleann,</span>1000);</pre>

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

原文链接：https://www.f2er.com/html5/73862.html

猜你在找的HTML5相关文章