<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>时钟</title>
</head>
<body>
<canvas id="canvas" width="600px" height="600px" style="border:1px dashed green"></canvas>
</body>
<script>
var cnavas=document.getElementById('canvas');
var cxt=canvas.getContext('2d');
function clock(){
//清空画布
cxt.clearRect(0,0,canvas.width,canvas.height);
//获得当前时间
var date=new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
hour=hour>12?hour-12:hour;
//绘制表盘
cxt.beginPath();//开启新路径
cxt.arc(300,200,150,Math.PI*2,0,true);
cxt.lineWidth=10; //行宽
cxt.strokeStyle='red';//描绘样式
cxt.stroke();//画笔
cxt.closePath();//关闭新路径
//时针刻度
for(var i=0;i<12;i++){
cxt.save();//保存当前的图层(方便将来裁剪、缩放、旋转等)
cxt.beginPath();
cxt.translate(300,200);//设置原点(0,0)
cxt.rotate(Math.PI*2/12*i);//旋转
cxt.moveTo(0,-145);//起始点
cxt.lineTo(0,-130);//结束点
cxt.strokeStyle='#000';
cxt.lineWidth=8;
cxt.stroke();
cxt.closePath();
cxt.restore();//将原来的图层恢复,将当前的图层保存进去
}
//分针刻度
for(var i=0;i<60;i++){
cxt.save();
cxt.beginPath();
cxt.translate(300,200);//设置原点(0,0)
cxt.rotate(Math.PI*2/60*i);//旋转
cxt.moveTo(0,-145);
cxt.lineTo(0,-135);
cxt.strokeStyle='#ccc';
cxt.lineWidth=6;
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//时针
cxt.save();
cxt.beginPath();
cxt.translate(300,200);
cxt.rotate(Math.PI*2/12*hour);//旋转
cxt.moveTo(0,0);
cxt.lineTo(0,-100);
cxt.strokeStyle='#000';
cxt.lineWidth=8;
cxt.stroke();
cxt.closePath();
cxt.restore();
//分针
cxt.save();
cxt.beginPath();
cxt.translate(300,200);
cxt.rotate(Math.PI*2/60*minute);//旋转
cxt.moveTo(0,0);
cxt.lineTo(0,-110);
cxt.strokeStyle='blue';
cxt.lineWidth=6;
cxt.stroke();
cxt.closePath();
cxt.restore();
//秒针
cxt.save();
cxt.beginPath();
cxt.translate(300,200);
cxt.rotate(Math.PI*2/60*second);//旋转
cxt.moveTo(0,0);
cxt.lineTo(0,-120);
cxt.strokeStyle='red';
cxt.lineWidth=4;
cxt.stroke();
cxt.closePath();
cxt.restore();
//表柱
cxt.save();
cxt.translate(300,200);
cxt.arc(0,0,10,Math.PI*2,0,true);
cxt.fill();
cxt.restore();
}
clock();
setInterval(clock,1000);
</script>
</html>
<html>
<head>
<meta charset="utf-8"/>
<title>时钟</title>
</head>
<body>
<canvas id="canvas" width="600px" height="600px" style="border:1px dashed green"></canvas>
</body>
<script>
var cnavas=document.getElementById('canvas');
var cxt=canvas.getContext('2d');
function clock(){
//清空画布
cxt.clearRect(0,0,canvas.width,canvas.height);
//获得当前时间
var date=new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
hour=hour>12?hour-12:hour;
//绘制表盘
cxt.beginPath();//开启新路径
cxt.arc(300,200,150,Math.PI*2,0,true);
cxt.lineWidth=10; //行宽
cxt.strokeStyle='red';//描绘样式
cxt.stroke();//画笔
cxt.closePath();//关闭新路径
//时针刻度
for(var i=0;i<12;i++){
cxt.save();//保存当前的图层(方便将来裁剪、缩放、旋转等)
cxt.beginPath();
cxt.translate(300,200);//设置原点(0,0)
cxt.rotate(Math.PI*2/12*i);//旋转
cxt.moveTo(0,-145);//起始点
cxt.lineTo(0,-130);//结束点
cxt.strokeStyle='#000';
cxt.lineWidth=8;
cxt.stroke();
cxt.closePath();
cxt.restore();//将原来的图层恢复,将当前的图层保存进去
}
//分针刻度
for(var i=0;i<60;i++){
cxt.save();
cxt.beginPath();
cxt.translate(300,200);//设置原点(0,0)
cxt.rotate(Math.PI*2/60*i);//旋转
cxt.moveTo(0,-145);
cxt.lineTo(0,-135);
cxt.strokeStyle='#ccc';
cxt.lineWidth=6;
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//时针
cxt.save();
cxt.beginPath();
cxt.translate(300,200);
cxt.rotate(Math.PI*2/12*hour);//旋转
cxt.moveTo(0,0);
cxt.lineTo(0,-100);
cxt.strokeStyle='#000';
cxt.lineWidth=8;
cxt.stroke();
cxt.closePath();
cxt.restore();
//分针
cxt.save();
cxt.beginPath();
cxt.translate(300,200);
cxt.rotate(Math.PI*2/60*minute);//旋转
cxt.moveTo(0,0);
cxt.lineTo(0,-110);
cxt.strokeStyle='blue';
cxt.lineWidth=6;
cxt.stroke();
cxt.closePath();
cxt.restore();
//秒针
cxt.save();
cxt.beginPath();
cxt.translate(300,200);
cxt.rotate(Math.PI*2/60*second);//旋转
cxt.moveTo(0,0);
cxt.lineTo(0,-120);
cxt.strokeStyle='red';
cxt.lineWidth=4;
cxt.stroke();
cxt.closePath();
cxt.restore();
//表柱
cxt.save();
cxt.translate(300,200);
cxt.arc(0,0,10,Math.PI*2,0,true);
cxt.fill();
cxt.restore();
}
clock();
setInterval(clock,1000);
</script>
</html>