<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas-clock</title>
</head>
<body>
<canvas id="myCanvas" class="canvas" width="150" height="150" style="border:1px solid #d3d3d3;margin: 0 auto;display: block;">
</canvas>
<script>
var clock = function(){
var canvas = document.querySelector("#myCanvas");
if(canvas && canvas.getContext)
{
var cxt = canvas.getContext("2d");
cxt.save();//保存状态
cxt.clearRect(0,0,150,150);//清理画布
cxt.translate(75,75);//以（75，75）为原点
cxt.scale(0.5,0.5);//缩放
cxt.rotate(-Math.PI/2);//逆转90°
//=======================================
//表盘
cxt.beginPath();
cxt.lineWidth= 30;
var gld = cxt.createLinearGradient(0,0,50,75);
gld.addColorStop(0,"#e0e3ec");
gld.addColorStop(1,"#9aa0a0");
cxt.strokeStyle = gld;
var grd = cxt.createRadialGradient(0,0,0,0,0,150);
grd.addColorStop(0,"#ccc");
grd.addColorStop(1,"#ccc");
cxt.fillStyle = grd;
cxt.arc(0,0,135,0,Math.PI*2,true);
cxt.stroke();
cxt.fill();
cxt.strokeStyle = "#969696";
cxt.lineCap = "square";
cxt.save();
cxt.lineWidth = 8;
cxt.beginPath();
for (var i = 0;i<12;i++) {
cxt.rotate(Math.PI/6);
cxt.moveTo(100,0);
cxt.lineTo(120,0);
cxt.stroke();
}
cxt.restore();
//分钟刻度
cxt.save();
cxt.lineWidth = 5;
for(i=0;i<60;i++){
if (i%5!=0) {
cxt.beginPath();
cxt.moveTo(132,0);
cxt.lineTo(120,0);
cxt.stroke();
}
cxt.rotate(Math.PI/30);
}
cxt.restore();
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hr = now.getHours();
hr= hr>12?hr-12:hr;
//时针
cxt.save();
cxt.rotate(hr*(Math.PI/6)+(Math.PI/360)*min + (Math.PI/21600)*sec);
cxt.lineWidth = 9;
cxt.beginPath();
cxt.moveTo(-20,0);
cxt.lineTo(70,0);
cxt.stroke();
cxt.restore();
//分针
cxt.save();
cxt.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);
cxt.lineWidth = 6;
cxt.beginPath();
cxt.moveTo(-28,0);
cxt.lineTo(90,0);
cxt.stroke();
cxt.restore();
//秒针
cxt.save();
cxt.rotate((Math.PI/30)*sec);
cxt.lineWidth = 3;
cxt.beginPath();
cxt.moveTo(-30,0);
cxt.lineTo(120,0);
cxt.stroke();
cxt.restore();
//中心点
cxt.beginPath();
cxt.fillStyle = "#969696";
cxt.arc(0,0,8,0,Math.PI*2,true);
cxt.fill();
cxt.restore();
}
}
setInterval(clock,1000);
</script>
</body>
</html>
