<!DOCTYPE html>
<html>
<head>
<title>时钟</title>
<html>
<head>
<title>时钟</title>
</head>
<body>
<canvas id="clock" width="600"height="600">你的浏览器不支持canvas标签，无法看到时钟
</canvas>
<body>
<canvas id="clock" width="600"height="600">你的浏览器不支持canvas标签，无法看到时钟
</canvas>
<script>
var canvas=document.getElementById('clock');
var cxt==clock.getContext('2d');
var canvas=document.getElementById('clock');
var cxt==clock.getContext('2d');
function drawClock(){//封装以下函数
//清除画布
cxt.clearRect(0,0,600,600);
//清除画布
cxt.clearRect(0,0,600,600);
var now = now Date();
var sec=now.getseconds();
var min=now.getMinutes();
var hour=now.getHours();
//小时必须获取浮点类型（小时+分数转化成的小时）
hour=hour+min/60;
var sec=now.getseconds();
var min=now.getMinutes();
var hour=now.getHours();
//小时必须获取浮点类型（小时+分数转化成的小时）
hour=hour+min/60;
//问题19：23：30
//将24小时制转换为12小时制
hour=hour>12?hour-12:hour
//将24小时制转换为12小时制
hour=hour>12?hour-12:hour
//表盘（蓝色）
cxt.linewidth=10;
cxt.strokeStyle="#blue"
cxt.beginPath();
cxt.arc(250,250,200,0,360,flase);
cxt.closePath();
cxt.stroke();
//刻度
//时刻度
for(var i=0;i<12;i++){
cxt.save();
// 设置时刻度的粗细
cxt.linewidth=7;
// 设置时刻度的颜色
cxt.strokeStyle="#000";
//设置0，0点
cxt.translate(250,250);
//再设置旋转角度
cxt.restore(i*30*Math.PI/180);//角度*Math.PI/180=弧度
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
for(var i=0;i<12;i++){
cxt.save();
// 设置时刻度的粗细
cxt.linewidth=7;
// 设置时刻度的颜色
cxt.strokeStyle="#000";
//设置0，0点
cxt.translate(250,250);
//再设置旋转角度
cxt.restore(i*30*Math.PI/180);//角度*Math.PI/180=弧度
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//分刻度
for(var i=0;i<60;i++){
cxt.save();
// 设置分刻度的粗细
cxt.linewidth=5;
// 设置分刻度的颜色
cxt.strokeStyle="#000";
//设置或者重置画布的0，0
cxt.translate(250,250);
//设置旋转角度
cxt.restore(i*6*Math.PI/180);
//角度*Math.PI/180=弧度
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//时针
cxt.save();
//设置时针风格
cxt.linewidth=7;
//设置时针的颜色///
cxt.strokeStyle="#000";
// 设置异次元的0，0点
cxt.translate(250,250);
// 设置旋转角度
cxt.restore(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0，-140);
cxt.lineTo(0，8);
cxt.closePath();
cxt.stroke();
cxt.restore();
//
//分针
cxt.save();
//设置分针风格
cxt.linewidth=5;
//设置分针的颜色///
cxt.strokeStyle="#000";
// 设置异次元的0，0点
cxt.translate(250,250);
// 设置旋转角度
cxt.restore(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0，-160);
cxt.lineTo(0，15);
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒针
cxt.save();
//设置秒针风格
cxt.linewidth=3;
//设置秒针的颜色
cxt.strokeStyle="red";
// 设置异次元的0，0点
cxt.translate(250,250);
// 设置旋转角度
cxt.restore(sec*6*Math.PI/180);
//画图
cxt.beginPath();
cxt.moveTo(0，-170);
cxt.lineTo(0，20);
cxt.closePath();
cxt.stroke();
//画出时针、分针、秒针的交叉点
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
cxt.closePath();
//设置填充样式
cxt.fillStyle="gray";
cxt.fill();
//设置笔触样式(已设置)
cxt.stroke();
//设置秒针前段的小圆点
cxt.beginPath();
cxt.arc(0,160,5,0,360,false);
cxt.closePath();
//设置填充样式
cxt.fillStyle="gray";
cxt.fill();
//设置笔触样式(已设置)
cxt.stroke();
for(var i=0;i<60;i++){
cxt.save();
// 设置分刻度的粗细
cxt.linewidth=5;
// 设置分刻度的颜色
cxt.strokeStyle="#000";
//设置或者重置画布的0，0
cxt.translate(250,250);
//设置旋转角度
cxt.restore(i*6*Math.PI/180);
//角度*Math.PI/180=弧度
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//时针
cxt.save();
//设置时针风格
cxt.linewidth=7;
//设置时针的颜色///
cxt.strokeStyle="#000";
// 设置异次元的0，0点
cxt.translate(250,250);
// 设置旋转角度
cxt.restore(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0，-140);
cxt.lineTo(0，8);
cxt.closePath();
cxt.stroke();
cxt.restore();
//
//分针
cxt.save();
//设置分针风格
cxt.linewidth=5;
//设置分针的颜色///
cxt.strokeStyle="#000";
// 设置异次元的0，0点
cxt.translate(250,250);
// 设置旋转角度
cxt.restore(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0，-160);
cxt.lineTo(0，15);
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒针
cxt.save();
//设置秒针风格
cxt.linewidth=3;
//设置秒针的颜色
cxt.strokeStyle="red";
// 设置异次元的0，0点
cxt.translate(250,250);
// 设置旋转角度
cxt.restore(sec*6*Math.PI/180);
//画图
cxt.beginPath();
cxt.moveTo(0，-170);
cxt.lineTo(0，20);
cxt.closePath();
cxt.stroke();
//画出时针、分针、秒针的交叉点
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
cxt.closePath();
//设置填充样式
cxt.fillStyle="gray";
cxt.fill();
//设置笔触样式(已设置)
cxt.stroke();
//设置秒针前段的小圆点
cxt.beginPath();
cxt.arc(0,160,5,0,360,false);
cxt.closePath();
//设置填充样式
cxt.fillStyle="gray";
cxt.fill();
//设置笔触样式(已设置)
cxt.stroke();
cxt.restore();
}
//使用setInterval(代码，毫秒时间) 让时钟动起来
setInterval(drawClock,1000)
setInterval(drawClock,1000)
</script>
</body>
</html>
</html>