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>