<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>时钟模拟</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
body{background: black;}
#c1{background: white;}
</style>
<script type="text/javascript">
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
function Draw(){
//规定中心位置,半径
var x = 200;
var y = 200;
var r = 150
//获取系统时间
var oDate = new Date();
var oHour = oDate.getHours();
var oMin = oDate.getMinutes();
var oSec = oDate.getSeconds();
//计算三针走的弧度,注意24制和12制都是一样的,只是24制的多走360°
//注意分钟走180°,时针要多走15°
var oHourValue = (-90 + oHour*30 + oMin/2)*Math.PI/180;
var oMinValue = (-90 + oMin*6)*Math.PI/180;
var oSecValue = (-90 + oSec*6)*Math.PI/180;
//画出分钟刻度大圆,共60格,每格6度
for(var i = 0; i<60; i++){
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x, y, r, 6*i*Math.PI/180, 6*(i+1)*Math.PI/180, false);
oGC.closePath();
oGC.stroke();//这是描边函数
}
oGC.fillStyle = 'white';
//绘制小时的刻度,12格,每格30°
oGC.lineWidth = 3;
for(var i = 0; i<12; i++){
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x, y, r, 30*i*Math.PI/180, 30*(i+1)*Math.PI/180, false);
oGC.closePath();
oGC.stroke();//这是描边函数
}
//挡住中间的圆
oGC.beginPath();
oGC.moveTo(x, y);
oGC.arc(x, y, r*19/20,0,360*Math.PI/180, false);
oGC.closePath();
oGC.fill();//这是填充函数
//画出时针
oGC.lineWidth = 5;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x, y, r*10/20, oHourValue, oHourValue);
oGC.closePath();
oGC.stroke();
//画出分针
oGC.lineWidth = 3;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x, y, r*15/20, oMinValue, oMinValue);
oGC.closePath();
oGC.stroke();
//画出秒针
oGC.lineWidth = 1;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x, y, r*18/20, oSecValue, oSecValue);
oGC.closePath();
oGC.stroke();
//计时器,不断刷新
setInterval(Draw,1000);//单位是毫秒
}
Draw();
}
</script>
</head>
<body>
<canvas id="c1" width="400" height="400">
</canvas>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>时钟模拟</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
body{background: black;}
#c1{background: white;}
</style>
<script type="text/javascript">
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
function Draw(){
//规定中心位置,半径
var x = 200;
var y = 200;
var r = 150
//获取系统时间
var oDate = new Date();
var oHour = oDate.getHours();
var oMin = oDate.getMinutes();
var oSec = oDate.getSeconds();
//计算三针走的弧度,注意24制和12制都是一样的,只是24制的多走360°
//注意分钟走180°,时针要多走15°
var oHourValue = (-90 + oHour*30 + oMin/2)*Math.PI/180;
var oMinValue = (-90 + oMin*6)*Math.PI/180;
var oSecValue = (-90 + oSec*6)*Math.PI/180;
//画出分钟刻度大圆,共60格,每格6度
for(var i = 0; i<60; i++){
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x, y, r, 6*i*Math.PI/180, 6*(i+1)*Math.PI/180, false);
oGC.closePath();
oGC.stroke();//这是描边函数
}
oGC.fillStyle = 'white';
//绘制小时的刻度,12格,每格30°
oGC.lineWidth = 3;
for(var i = 0; i<12; i++){
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x, y, r, 30*i*Math.PI/180, 30*(i+1)*Math.PI/180, false);
oGC.closePath();
oGC.stroke();//这是描边函数
}
//挡住中间的圆
oGC.beginPath();
oGC.moveTo(x, y);
oGC.arc(x, y, r*19/20,0,360*Math.PI/180, false);
oGC.closePath();
oGC.fill();//这是填充函数
//画出时针
oGC.lineWidth = 5;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x, y, r*10/20, oHourValue, oHourValue);
oGC.closePath();
oGC.stroke();
//画出分针
oGC.lineWidth = 3;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x, y, r*15/20, oMinValue, oMinValue);
oGC.closePath();
oGC.stroke();
//画出秒针
oGC.lineWidth = 1;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x, y, r*18/20, oSecValue, oSecValue);
oGC.closePath();
oGC.stroke();
//计时器,不断刷新
setInterval(Draw,1000);//单位是毫秒
}
Draw();
}
</script>
</head>
<body>
<canvas id="c1" width="400" height="400">
</canvas>
</body>
</html>