本文实例为大家分享了js时钟特效的具体代码,供大家参考,具体内容如下
js代码
画布var=. getelementbyid(“时钟”);
var时钟=canvas.getContext (2 d);
函数中(){
clock.save ();//开始画外层圆
时钟。翻译(200、200);
时钟。strokeStyle='黑色';
时钟。线宽=3;
clock.beginPath ();
时钟。弧(0,0,195 0 2 * Math.PI);
clock.stroke ();//时钟上的数字
var shuzi=[3、4、5, 6, 7, 8, 9, 10, 11, 12日,1,2);
时钟。30 px Arial字体=" ";
时钟。textAlign=爸行摹?
时钟。textBaseline=爸屑洹?
shuzi。forEach(函数(号码,我){
var rad=2 *数学。π/12 *我;
var x=Math.cos (rad) * 180;
var y=sin (rad) * 180;
时钟。fillText(数,x, y);
})；//小圆点
(j=0;j & lt;60;j + +) {
var h=2 *数学。π/60 * j;
var m=Math.cos (h) * 180;
var n=sin (h) * 180;
时钟。fillStyle='黑色';
clock.beginPath ();
如果(j % 5===0) {
继续;
}
时钟。弧(m, n 3 0 2 * Math.PI);
clock.fill ();
}
}
函数drawHour(小时、分钟){
clock.save ();
var rad=2 *数学。π/12 *小时;
var红色=2 * Math.PI/12/60 *分钟;
clock.rotate (rad +红);
时钟。线宽=10;
时钟。lineCap=霸病?
clock.beginPath ();
时钟。函数(0 5);
时钟。画线(0,-100);
clock.stroke ();
clock.restore ();
}
函数drawmin (min) {
clock.save ();
var rad=2 *数学。π/* 60分钟;
clock.rotate (rad);
时钟。线宽=5;
时钟。lineCap=霸病?
clock.beginPath ();
时钟。函数(0,10);
时钟。画线(0,-150);
clock.stroke ();
clock.restore ();
}
函数drawsec (sec) {
clock.save ();
var rad=2 *数学。π/60 *秒;
clock.rotate (rad);
时钟。线宽=2;
时钟。lineCap=霸病?
时钟。strokeStyle=昂焐?
clock.beginPath ();
时钟。函数(0,10);
时钟。画线(0,-180);
clock.stroke ();
clock.restore ();
}
函数殿(){
时钟。fillStyle=鞍住?
clock.beginPath ();
时钟。弧(0 0 2 0 2 * Math.PI);
clock.fill ();
}
函数xuanzhuan () {
clock.clearRect (0, 0400400);
钟();
现在var=新的日期();
乏时=now.getHours ();
var min=now.getMinutes ();
var秒=now.getSeconds ();
drawHour(小时、分钟);
drawmin(分钟);
drawsec (sec);
月亮();
clock.restore ();
}
xuanzhuan ();
setInterval (xuanzhuan, 1000);
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
