html5画布时钟cnsd,Canvas：时钟

这个时钟是将钟盘的圆心点移到了 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@outlook.com

特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有