<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="500" height="500">您的浏览器不支持，请更新</canvas>
<script>
//绘制图片：drawImage(image,dx,dy[,dWidth,dHeight]) 复制图片：drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
//意思为 把一张图片image放到canvas中，坐标是dx,dy控制图片位置以canvas左上角为坐标原点，dw,dh控制图片在canvas中显示的大小，
//sx和sy代表你要从哪开始裁剪图片，sw和sh代表你要裁剪的那部分的大小
//sx,sy,sWidth,sHeight在图像中指定源矩形，dx,dy,dWidth,dHeight在画布上指定目标矩形
var c=document.getElementById("canvas");//获取canvas元素
var ctx=c.getContext("2d");//获取渲染上下文
function drawClock(){//创建函数
ctx.clearRect(0,0,c.width,c.height);//clearRect在给定矩形内清空一个矩形，0，0清空起始点，后两者为清空图形长宽
var now = new Date();//创建变量时分秒
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
hour += min/60;//60分小时加一
hour-hour>12?hour-12:hour;//三元运算符，大于12减去12，小于则不变
//表盘
ctx.lineWidth=10;//lineWidth 属性设置或返回当前线条的宽度，以像素计
ctx.strokeStyle="deepskyblue";//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
ctx.beginPath();//起始一条路径，或重置当前路径
ctx.arc(250,250,200,0,360,false);//创建弧/曲线（用于创建圆形或部分圆）
//arc(x,y,r,sAngle,eAngle,counterclockwise)
//圆中心xy坐标r为半径，sAngle,eAngle起始角结束角，counterclockwise可选规定应该逆时针(false)还是顺时针(true)绘图。
ctx.closePath();//创建从当前点回到起始点的路径
ctx.stroke();//绘制已定义的路径。
//刻度
//1.时刻度
for(var i=0;i<12;i++){
ctx.save();//保存当前环境的状态。
//设置时针粗细
ctx.lineWidth-7;
ctx.strokeStyle="#000";//设置颜色
//设置0，0点
ctx.translate(250,250);//重新映射画布上的(0,0)位置，即从250，250点为起始点开始绘制，而不是画布左上角的00点
//旋转角度
ctx.rotate(i*30*Math.PI/180);//旋转当前绘图，旋转i*30度，共绘制12个时针的刻度
ctx.beginPath();//开始一条路径，从位置0,-170。创建到达位置0,-190的一条线
ctx.moveTo(0,-170);//之后就会随着角度变化而绘制12个时针刻度
ctx.lineTo(0,-190);//时针刻度宽7，长20
ctx.closePath();
ctx.stroke();
ctx.restore();//返回之前保存过的路径状态和属性
}
//分刻度
for(var i=0;i<60;i++){//注释同时针
ctx.save();
//分刻度粗细
ctx.lineWidth-5;
ctx.strokeStyle="orangered";
//重置
ctx.translate(250,250);
//旋转角度
ctx.rotate(i*6*Math.PI/180);//旋转6度的倍数
//画分刻度
ctx.beginPath();
ctx.moveTo(0,-180);//分针刻度宽5，长10
ctx.lineTo(0,-190);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
//时针指针
ctx.save();
ctx.lineWidth-7;
ctx.strokeStyle="#000";
//设置异次元空间0，0点
ctx.translate(250,250);
//设置角度
ctx.rotate(hour*30*Math.PI/180);//旋转角度小时*30
ctx.beginPath();
ctx.moveTo(0,-140);//宽度7长度150
ctx.lineTo(0,10);
ctx.closePath();
ctx.stroke();
ctx.restore();
//分针
ctx.save();
ctx.lineWidth-5;
ctx.strokeStyle="orangered";
//重置
ctx.translate(250,250);
ctx.rotate(min*6*Math.PI/180);//旋转角度分*6度
ctx.beginPath();
ctx.moveTo(0,-160);
ctx.lineTo(0,15);
ctx.closePath();
ctx.stroke();
ctx.restore();
//秒针
ctx.save();
ctx.strokeStyle="orchid";
ctx.lineWidth-3;
//重置
ctx.translate(250,250);
ctx.rotate(sec*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-170);
ctx.lineTo(0,20);
ctx.closePath();
ctx.stroke();
//设置时针，分针，秒针交叉点
ctx.beginPath();
ctx.arc(0,0,5,0,360,false);//半径5的一个圆
ctx.closePath();
//填充样式
//设置笔触样式(秒针已设）
ctx.stroke();
ctx.fillStyle="wheat";
ctx.fill();
//设置秒针前段小点
ctx.beginPath();
ctx.arc(0,-150,5,0,360,false);//半径5的一个圆
ctx.closePath();
ctx.stroke();
ctx.fillStyle="wheat";
ctx.fill();
ctx.restore();
}
drawClock();//调用函数
setInterval(drawClock,1000);//一秒走一次
</script>
</body>
</html>