var
clock=(
function
(){
function
_canvasClock(){
var
cvs=document.getElementById(
'canvas'
);
var
ctx=cvs.getContext(
'2d'
);
var
PI=Math.PI;
var
lineWidth=5;
gradient.addColorStop(1,
"#2ec2ff"
);
ctx.fillStyle =
'#ef6670'
;
ctx.fillRect(0,0,600,600);
var
drawBig=
function
(){
var
time=
new
Date
();
var
second=time.getSeconds();
ctx.clearRect(0,0,600,600);
ctx.lineWidth=lineWidth;
ctx.strokeStyle=gradient;
ctx.arc(300,300,290,0, PI * 2,false);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.lineWidth=lineWidth;
ctx.strokeStyle=gradient;
ctx.arc(300,300,10,0, PI * 2,false);
ctx.stroke();
ctx.closePath();
for
(
var
i=0;i<60;i++){
ctx.save();
ctx.beginPath();
ctx.save();
ctx.lineWidth=4;
ctx.strokeStyle=gradient;
ctx.translate(300,300);
ctx.rotate(i*PI/6); ctx.beginPath();
ctx.moveTo(0,-287);
ctx.lineTo(0,-278);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
ctx.lineWidth=3;
ctx.strokeStyle=
"#0f0f0f"
;
ctx.translate(300,300);
ctx.rotate(hour*PI/6+second*PI/108000);
ctx.beginPath();
ctx.moveTo(0,-238);
ctx.lineTo(0,10);
ctx.closePath();
ctx.stroke();
ctx.restore();
ctx.lineWidth=3;
ctx.strokeStyle=
"#010101"
;
ctx.translate(300,300);
ctx.rotate(Minute*PI/30+second*PI/1800);
ctx.beginPath();
ctx.moveTo(0,-258);
ctx.lineTo(0,15);
ctx.closePath();
ctx.stroke();
ctx.restore();
ctx.strokeStyle=
"#ff100d"
;
ctx.lineWidth=3;
ctx.translate(300,300);
ctx.rotate(second*PI/30);
ctx.beginPath();
ctx.moveTo(0,-278);
ctx.lineTo(0,20);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.closePath();
ctx.fillStyle=
"#fff"
;
ctx.fill();
ctx.stroke();
ctx.restore();
requestAnimationFrame(drawBig);
drawBig();
setInterval(drawBig,1000);
canvasClock:_canvasClock,
}
}())