<!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 {
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' );
oCan.translate( 250 , 250 );
drawClock();
setInterval( drawClock , 1000 );
function drawClock(){
oCan.clearRect( -250 , -250 , 500 , 500 );
var nowTime = new Date();
var hour = nowTime.getHours();
var minute = nowTime.getMinutes();
var second = nowTime.getSeconds();
oCan.beginPath();
oCan.arc( 0 , 0 , 150 , 0 * Math.PI / 180 , 360 * Math.PI / 180 );
oCan.lineWidth = 5;
oCan.strokeStyle = '#979';
oCan.closePath();
oCan.stroke();
/* 绘制表盘秒针刻度线 */
oCan.strokeStyle = '#999';
oCan.lineWidth = 3;
for( i = 0 ; i < 60 ; i++ ){
oCan.save();
oCan.beginPath();
oCan.rotate( i * 6 * Math.PI / 180 );
oCan.moveTo( 0 , -140 );
oCan.lineTo( 0 , -128 );
oCan.closePath();
oCan.stroke();
oCan.restore();
}
/* 绘制表盘时针刻度线 */
for( var i = 0 ; i < 12 ; i++ ){
oCan.save(); /* 保存画布信息 */
oCan.beginPath();
oCan.rotate( i * 30 * Math.PI / 180 );
oCan.moveTo( 0 , -140 );
oCan.lineTo( 0 , -125 );
oCan.closePath();
oCan.stroke();
oCan.restore();
}
/* 绘制时针线 */
oCan.save();
oCan.beginPath();
oCan.lineWidth = 4;
oCan.strokeStyle = '#999';
oCan.rotate( ( hour + minute / 60 ) * 30 * Math.PI / 180 );
oCan.moveTo( 0 , 10 );
oCan.lineTo( 0 , -85 );
oCan.stroke();
oCan.closePath();
oCan.restore();
/* 绘制分针线 */
oCan.save();
oCan.beginPath();
oCan.lineWidth = 4;
oCan.strokeStyle = '#999';
oCan.rotate( ( minute * 6 + second / 60 ) * Math.PI / 180 );
oCan.moveTo( 0 , 15 );
oCan.lineTo( 0 , -100 );
oCan.stroke();
oCan.closePath();
oCan.restore();
/* 绘制秒钟线 , 并且将装饰用线绘制在同意图层之上,使秒钟线在旋转的时候装饰也同时旋转*/
oCan.save();
oCan.beginPath();
oCan.lineWidth = 3;
oCan.strokeStyle = '#999';
oCan.rotate( second * 6 * Math.PI / 180 );
oCan.moveTo( 0 , 25 );
oCan.lineTo( 0 , -110 );
oCan.stroke();
oCan.closePath();
oCan.beginPath();
oCan.lineWidth = 2;
oCan.strokeStyle = '#F0F';
oCan.fillStyle = '#FFF';
oCan.arc( 0 , 0 , 4 , 0 * Math.PI / 180 , 360 * Math.PI / 180 , false );
oCan.fill();
oCan.stroke();
oCan.closePath();
oCan.beginPath();
oCan.lineWidth = 2;
oCan.strokeStyle = '#F0F';
oCan.fillStyle = '#FFF';
oCan.arc( 0 , -80 , 4 , 0 * Math.PI / 180 , 360 * Math.PI / 180 , false );
oCan.fill();
oCan.stroke();
oCan.closePath();
oCan.restore();
}
} );
</script>
</head>
<body>
<canvas id='can' width='500' height='500'>您的浏览器版本过低,请您更换浏览器以获取更好的用户体验...</canvas>
</body>
</html>
