实现一个时钟的绘制和时间的显示
一，首先是页面的搭建html部分以及一点点的css代码，因为css这块用的比较少，所以就没有单独出来：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
//显示时间画布
#cav01{
600px;
height:150px;
margin:auto;
}
//时钟画布
#cav02{
420px;
height:420px;
margin:auto;
}
</style>
</head>
<body onload="init()">
<div id="cav01">
<canvas id="canvas01" width="600" height="100" margin=auto></canvas>
</div>
<div id="cav02">
<canvas id="canvas" width="390" height="390" margin=auto></canvas>
</div>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/requestAnimFrame.js"></script>
</body>
</html>
二，绘制时钟的js部分：
这里需要用到两个js文件
1，时钟js：
var can01;
var ctx01;
var can;
var ctx;
function init(){
can01=document.getElementById('canvas01');
ctx01=can01.getContext("2d");
can=document.getElementById('canvas');
ctx=can.getContext("2d");
time();
run();
}
//时间
function time(){
window.requestAnimFrame(time);
ctx01.clearRect(0,0,600,100); //清除上次的绘画 放在每次绘画之前
shuaxin();
}
//循环调用run
function run(){
window.requestAnimFrame(run);
drawbiaopan();
drawkedu();
biaozhen();
}
//画表盘
function drawbiaopan(){
//arc(x,y,r,sAngle,eAngle,counterclockwise)
//x,y圆的中心坐标，r圆的半径，sAngle,eAngle圆的起始终点，
//counterclockwise可选，表示画圆逆时针还是顺时针False为顺时针，true为逆时针
ctx.clearRect(20,20,390,390);
ctx.beginPath();
ctx.arc(200,200,180,0,2*Math.PI,false);
ctx.lineWidth=5;
ctx.strokeStyle="微软雅黑";
ctx.stroke();
ctx.closePath();
}
//画刻度盘
function drawkedu(){
//时钟
for(var i=0;i<12;i++)
{
ctx.save();
ctx.translate(200,200);
ctx.lineWidth=2;
ctx.strokeStyle="green";
ctx.rotate(i*30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-165);
ctx.lineTo(0,-180);
ctx.font="100 14px 宋体";
ctx.textAlign="left";
ctx.textBaseLine="top";
if(i==0){
ctx.strokeText(12,i*(-20)*Math.PI/120,-150);
}else{
ctx.strokeText(i,i*(-20)*Math.PI/120,-150);
}
ctx.stroke();
ctx.closePath();
ctx.restore();
}
//分钟
for(var i=0;i<60;i++)
{
ctx.save();
ctx.translate(200,200);
ctx.lineWidth=1;
ctx.strokeStyle="green";
ctx.rotate(i*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-170);
ctx.lineTo(0,-180);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
}
//画表针
function biaozhen(){
var now=new Date();
var sec=now.getSeconds();
var mins=now.getMinutes();
var hours=now.getHours();
hours=hours+mins/60+sec/3600;
mins=mins+sec/60;
//时针
ctx.save();
ctx.translate(200,200);
ctx.lineWidth=3;
ctx.strokeStyle="grey";
ctx.rotate(hours*30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,-70);//圆心起点
ctx.stroke();
ctx.closePath();
ctx.restore();
//分针
ctx.save();
ctx.translate(200,200);
ctx.lineWidth=2;
ctx.strokeStyle="#000";
ctx.rotate(mins*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,0);//起点坐标
ctx.lineTo(0,-105);//终点坐标
ctx.stroke();
ctx.closePath();
ctx.restore();
//秒针
ctx.save();
ctx.translate(200,200);
ctx.lineWidth=1;
ctx.strokeStyle="red";
ctx.rotate(sec*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,-130);//圆心起点
ctx.stroke();
ctx.closePath();
ctx.restore();
}
function shuaxin(){
var now=new Date();
var sec=now.getSeconds();
var mins=now.getMinutes();
var hours=now.getHours();
ctx01.save();
ctx01.beginPath();
ctx01.fillStyle="red";
ctx01.strokeStyle="red"
ctx01.font="bold 40px 微软雅黑";
//清除上次的时间
//这块代码有点冗余，但是还没有想到有什么好的处理办法，以后再改吧
if(hours<10){
if(mins<10){
if(sec<10){
//hours<10&&mins<10&&sec<10
ctx01.strokeText('本地时间：'+'0'+hours+':'+'0'+mins+':'+'0'+sec,100,80);
ctx01.fillText('本地时间：'+'0'+hours+':'+'0'+mins+':'+'0'+sec,100,80);
}else{
//hours<10&&mins<10&&sec>10
ctx01.strokeText('本地时间：'+'0'+hours+':'+'0'+mins+':'+sec,100,80);
ctx01.fillText('本地时间：'+'0'+hours+':'+'0'+mins+':'+sec,100,80);
}
}else{
//hours<10&&mins>10&&sec<10
if(sec<10){
ctx01.strokeText('本地时间：'+'0'+hours+':'+mins+':'+'0'+sec,100,80);
ctx01.fillText('本地时间：'+'0'+hours+':'+mins+':'+'0'+sec,100,80);
}else{
//hours<10&&mins>10&&sec>10
ctx01.strokeText('本地时间：'+'0'+hours+':'+mins+':'+sec,100,80);
ctx01.fillText('本地时间：'+'0'+hours+':'+mins+':'+sec,100,80);
}
}
}
else{
if(mins<10){
if(sec<10){
//hours>10&&mins<10&&sec<10
ctx01.strokeText('本地时间：'+hours+':'+'0'+mins+':'+'0'+sec,100,80);
ctx01.fillText('本地时间：'+hours+':'+'0'+mins+':'+'0'+sec,100,80);
}else{
//hours>10&&mins<10&&sec>10
ctx01.strokeText('本地时间：'+hours+':'+'0'+mins+':'+sec,100,80);
ctx01.fillText('本地时间：'+hours+':'+'0'+mins+':'+sec,100,80);
}
}else{
if(sec<10){
//hours>10&&mins>10&&sec<10
ctx01.strokeText('本地时间：'+hours+':'+mins+':'+'0'+sec,100,80);
ctx01.fillText('本地时间：'+hours+':'+mins+':'+'0'+sec,100,80);
}else{
//hours>10&&mins>10&&sec>10
ctx01.strokeText('本地时间：'+hours+':'+mins+':'+sec,100,80);
ctx01.fillText('本地时间：'+hours+':'+mins+':'+sec,100,80);
}
}
}
ctx01.closePath();
ctx01.restore();
}
2，做了兼容的requestAnimitionFrame循环函数
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000 / 60);
};
})();