这个时钟是将钟盘的圆心点移到了 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:19var 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;
这样,我们在运行时,就可以看出,分针和时针都是不停的在运转的
//小时
functiontimh(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();
}//分钟
functiontimm(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();
}//秒钟
functiontims(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();
}
在最后为了真实一点,在钟盘中心增加一个固定
functionding(){
ctx.beginPath();
ctx.fillStyle= "#fff";
ctx.arc(0,0,3,0,Math.PI*2);
ctx.closePath();
ctx.fill();
}
最后在添加无限定时器运转
functioncleann(){
ctx.clearRect(-r,-r,width,height);var timer = newDate();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);
效果(背景图片可以自行加入)
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有