<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.οnlοad=function(){
//1.获取画布
var canvas=document.
getElementById("canvas");
//2.获取上下文对象
var cx=canvas.
getContext("2d");
function clock(){
//3.设置画笔样式
cx.fillStyle=
"orange";
//4.绘制图形
//a.绘制表盘
cx.
beginPath();
cx.
arc(300,300,200,0,Math.PI*2
);
cx.
closePath();
cx.
fill();
//b.绘制时刻度
cx.lineWidth=2
;
cx.strokeStyle=
'black';
for(var i=0
;i<12
;i++){
cx.
save();
cx.
translate(300,300
);
cx.
rotate(i*
(Math.PI/6
));
cx.
beginPath();
cx.
moveTo(0,-180
);
cx.
lineTo(0,-200
);
cx.
closePath();
cx.
stroke();
cx.fillStyle=
"black";
cx.font=
'16px blod';
cx.
rotate(Math.PI/6
);
cx.
fillText(i+1,-5,-220
);
cx.
restore();
}
//c.绘制分刻度
for(var i=0
;i<60
;i++){
cx.
save();
cx.
translate(300,300
);
cx.
rotate(i*
(Math.PI/30
));
cx.
beginPath();
cx.
moveTo(0,-190
);
cx.
lineTo(0,-200
);
cx.
stroke();
cx.
closePath();
cx.
restore();
}
//d.获取当前时间
var today=new
Date();
var hour=today.
getHours();
var min=today.
getMinutes();
var sec=today.
getSeconds();
hour=hour+min/60
;
//e.绘制时针
cx.lineWidth=5
;
cx.
save();
cx.
translate(300,300
);
cx.
rotate(hour*
(Math.PI/6
));
cx.
beginPath();
cx.
moveTo(0,10
);
cx.
lineTo(0,-120
);
cx.
closePath();
cx.
stroke();
cx.
restore();
//f.绘制分针
cx.lineWidth=3
;
cx.
save();
cx.
translate(300,300
);
cx.
rotate(min*
(Math.PI/30
));
cx.
beginPath();
cx.
moveTo(0,10
);
cx.
lineTo(0,-160
);
cx.
closePath();
cx.
stroke();
cx.
restore();
//g.绘制秒针
cx.lineWidth=2
;
cx.strokeStyle=
"red";
cx.
save();
cx.
translate(300,300
);
cx.
rotate(sec*
(Math.PI/30
));
cx.
beginPath();
cx.
moveTo(0,10
);
cx.
lineTo(0,-180
);
cx.
closePath();
cx.
stroke();
cx.
restore();
//h.绘制交叉处
cx.fillStyle=
'#ccc';
cx.strokeStyle=
'red';
cx.
save();
cx.
translate(300,300
);
cx.
beginPath();
cx.
arc(0,0,5,0,Math.PI*2
);
cx.
closePath();
cx.
fill();
cx.
stroke();
cx.
restore();
setTimeout(clock,1000
);
}
clock();
}
</script>
</head>
<body>
<canvas id=
"canvas" width=
"600px" height=
"600px" style=
"background-color: #ccc;"></canvas>
</body>
</html>
