canvas绘制时钟

css样式

<style>
			body {
				background: black
			}
			
			#canvas {
				background: white;
			}
		</style>

html

	<canvas id="canvas" width="400" height="400">
                   不支持
    </canvas>

js:

<script>
			var oC = document.getElementById("c1"); //获取到canvas元素
			var oGc = oC.getContext("2d"); //创建一个2d空间

			setInterval(Time, 1000); //每隔一秒调用一次
			function Time() {
				var nowTime = new Date();
				var nH = nowTime.getHours(); //获得当前小时
				var nM = nowTime.getMinutes(); //获得当前分钟数
				var nS = nowTime.getSeconds(); //获得当前秒数

				oGc.clearRect(0, 0, 400, 400);
				oGc.beginPath();
				oGc.arc(200, 200, 150, 0, 360 * Math.PI / 180, false); //PI是 π，false为顺时针 150为半径长度
				//    oGc.beginPath();  //加上外面的圆就不见了
				for(var i = 0; i < 60; i++) {
					oGc.moveTo(200, 200); //将表中心移到画布的中心
					oGc.arc(200, 200, 150, i * 6 * Math.PI / 180, i * 6 * Math.PI / 180, false);
				}
				//最外面一圈的圆
				oGc.stroke(); //画线，默认黑色
				oGc.beginPath();
				oGc.fillStyle = "#fff"; //填充颜色
				oGc.arc(200, 200, 150 * 19 / 20, 0, 360 * Math.PI / 180, false);
				oGc.fill(); //结束画线
				//12个小短线和里面的小小短线
				oGc.beginPath();
				oGc.lineWidth = "3";
				for(var i = 0; i < 12; i++) {
					oGc.moveTo(200, 200);
					oGc.arc(200, 200, 150, i * 30 * Math.PI / 180, i * 30 * Math.PI / 180, false);
				}
				oGc.stroke();
				oGc.fillStyle = "#fff";
				oGc.arc(200, 200, 150 * 18 / 20, 0, 360 * Math.PI / 180, false);
				oGc.fill();
				//时针
				oGc.beginPath();
				oGc.lineWidth = "5";
				oGc.moveTo(200, 200);
				oGc.arc(200, 200, 150 * 10 / 20, (nH * 30 + nM / 2 - 90) * Math.PI / 180, (nH * 30 + nM / 2 - 90) * Math.PI / 180, false);
				oGc.stroke();
				//分针
				oGc.beginPath();
				oGc.lineWidth = "5";
				oGc.moveTo(200, 200);
				oGc.arc(200, 200, 150 * 13 / 20, (nM * 6 + nS / 10 - 90) * Math.PI / 180, (nM * 6 + nS / 10 - 90) * Math.PI / 180, false);
				oGc.stroke();
				//秒针
				oGc.beginPath();
				oGc.lineWidth = "5";
				oGc.moveTo(200, 200);
				oGc.arc(200, 200, 150 * 16 / 20, (nS * 6 - 90) * Math.PI / 180, (nS * 6 - 90) * Math.PI / 180, false);
				oGc.stroke();
			}
		</script>