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>