<!DOCTYPE html>
<html lang='zh-cn'>
<head>
<title>Insert you title</title>
<meta name='description' content='this is my page'>
<meta name='keywords' content='keyword1,keyword2,keyword3'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel='stylesheet' type='text/css' href='./css/index.css' />
<script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
<style type='text/css'>
html,body,canvas {
margin: 0; padding: 0;
}
html {
background: #999; height: 100%;
}
#can {
background: #FFF; display: block; margin: 75px auto; border-radius: 2px;
}
</style>
<script type='text/javascript'>
$( function(){
var oCan = $( '#can' ).get( 0 ).getContext( '2d' );
drawClock(); /* 解决定时器加载延迟显示的BUG */
setInterval( drawClock , 1000 );
function drawClock(){
var nowTime = new Date();
var hour = nowTime.getHours();
var minute = nowTime.getMinutes();
var second = nowTime.getSeconds();
oCan.clearRect(0,0,$('#can').get(0).width,$('#can').get(0).height); /* 解决锯齿状, */
/* 绘制具有秒针刻度的表盘 */
for( var i = 0 ; i < 60 ; i++ ){
oCan.beginPath();
oCan.strokeStyle = '#000';
oCan.lineWidth = 2;
oCan.moveTo( 250 , 250 ); /* 注意 : 这样写的效果 ; */
oCan.arc( 250 , 250 , 150 , 6 * i * Math.PI / 180 , ( i + 1 ) * 6 * Math.PI / 180 , false );
oCan.closePath();
oCan.stroke();
}
/* 绘制具有分针刻度的表盘 */
for( var i = 0 ; i < 12 ; i++ ){
oCan.beginPath();
oCan.strokeStyle = '#F00';
oCan.lineWidth = 5;
oCan.moveTo( 250 , 250 ); /* 注意 : 这样写的效果 ; */
/* 使用 arc 方法的原因就是 : 可以通过计算来设置角度 */
oCan.arc( 250 , 250 , 149 , i * 30 * Math.PI / 180 , i * 30 * Math.PI / 180 , false );
oCan.closePath();
oCan.stroke();
}
/* 绘制表盘遮盖 */
oCan.beginPath();
oCan.arc( 250 , 250 , 140 , 0 * Math.PI / 180 , 360 * Math.PI / 180 , false );
oCan.fillStyle = '#FFF';
oCan.closePath();
oCan.fill();
/* 绘制圆心 */
oCan.beginPath();
oCan.fillStyle = '#000';
oCan.moveTo( 250 , 250 );
oCan.arc( 250 , 250 , 7 , 0 * Math.PI / 180 , 360 * Math.PI / 180 , false );
oCan.closePath();
oCan.fill();
/* 绘制时针 */
oCan.beginPath();
oCan.strokeStyle = '#000';
oCan.lineWidth = 6;
oCan.moveTo( 250 , 250 );
oCan.arc( 250 , 250 , 70 , ( -90 + (hour + minute /60) * 30 ) * Math.PI / 180 , ( -90 + (hour + minute /60) * 30 ) * Math.PI / 180 , false );
oCan.closePath();
oCan.stroke();
/* 绘制分针 */
oCan.beginPath();
oCan.strokeStyle = '#000';
oCan.lineWidth = 4;
oCan.moveTo( 250 , 250 );
/* 在这里切记 默认划线的角度是水平 0度开始的,但是我们的钟表设置是从 90度开始的所以我们要在度数上减去90度(逆时针是负数) */
oCan.arc( 250 , 250 , 100 , ( -90 + (minute +second/60) * 6 ) * Math.PI / 180 , ( -90 + (minute +second/60) * 6 ) * Math.PI / 180 , false );
oCan.closePath();
oCan.stroke();
/* 绘制秒针 */
oCan.beginPath();
oCan.strokeStyle = '#000';
oCan.lineWidth = 3;
oCan.moveTo( 250 , 250 );
oCan.arc( 250 , 250 , 120 , ( -90 + second * 6 ) * Math.PI / 180 , ( -90 + second * 6 ) * Math.PI / 180 , false );
oCan.closePath();
oCan.stroke();
}
} );
</script>
</head>
<body>
<canvas id='can' width='500' height='500'>您的浏览器版本过低,请升级您的浏览器以获取更好的用户体验...</canvas>
</body>
</html>
