第一次在博客园注册发博。有一次去人家单位开标，看到开标网站上有个钟表动画，一时兴起，就写了个简单的钟表动画。
用js和html5 canvas对象实现一个简单钟表程序
主要用到的就是h5的canvas对象
canvas对象本人也不是很熟，大致看了几个常用的方法，难免有不足之处，仅是练习所用。
实现思路：画表盘，画刻度，画表针就是这么个思路。
主要就涉及到以下几个方法
arc 创建弧/曲线（用于创建圆形或部分圆）
rotate 旋转
lineTo画线
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Js实现一个简单的钟表动画</title>
<style type="text/css">
canvas{ margin-left:500px;
margin-top:100px; } </style>
</head> <body>
<canvas id="canvas" width="600" height="600"></canvas>
<script language="javascript">
/*
作者：胖兔
时间:2017.8.9
描述：用js和html5 canvas对象实现一个简单钟表程序
*/ var Canvas = { //属性
Context:document.getElementById("canvas").getContext('2d'), //擦除
Clear:function(){ var cxt = Canvas.Context;
var width = cxt.canvas.width;
var height = cxt.canvas.height;;
this.Context.clearRect(0,0, width, height);
},
//radius钟表半径,sencondScaleWidth刻度长度，secondHandWidth秒针长度
CreateClock:function(radius,sencondScaleWidth,secondHandWidth){
var me = this;
var radius = radius;
var sencondScaleWidth = sencondScaleWidth;
var secondHandWidth = secondHandWidth;
//小时刻度
var hourScaleWidth = sencondScaleWidth*2;
//时针分针长度
var hourHandWidth = secondHandWidth*80/100;
//分针长度
var minuteHandWidth = secondHandWidth*90/100;
//确定圆心坐标
var point = {x:this.Context.canvas.width/2,y:this.Context.canvas.height/2};
var ctx = this.Context;//获取上下文
//绘制圆圈 function drawCircle(){ ctx.save();//记录画笔状态
//确定画笔的位置在圆心点
ctx.translate(point.x,point.y);
//ctx.fillStyle = "black";
ctx.strokeStyle="gray";
ctx.lineWidth = 2;
ctx.beginPath();//开始绘制路径
ctx.arc(0,0,radius,0,Math.PI*2);
ctx.closePath();//关闭路径
ctx.stroke();//绘制
ctx.restore();//复位 }
//绘制刻度
function drawScale(){
ctx.save();//记录画笔状态
var perHourRadian = Math.PI/6;
var perMinuteRadian = Math.PI/30;
//确定画笔的位置在圆心点
ctx.translate(point.x,point.y);
ctx.strokeStyle="gray"; //此处为了省事，只在表盘上简单的写了几个时间数字
ctx.font = "bold 30px impack"
var dc = radius-hourScaleWidth-30;
ctx.fillText("3", dc, 10);
ctx.fillText("6", -10,dc );
ctx.fillText("9", -dc, 10);
ctx.fillText("12", -15, -dc);
ctx.stroke(); for(var i=0;i<12;i++){
//坐标旋转
ctx.rotate(perHourRadian);
ctx.moveTo(radius-hourScaleWidth,0);
ctx.lineTo(radius,0);
} for(var i=0;i<60;i++){
//坐标旋转
ctx.rotate(perMinuteRadian);
ctx.moveTo(radius-sencondScaleWidth,0);
ctx.lineTo(radius,0);
} ctx.stroke();//绘制
ctx.restore(); //radian
}
//drawScale();
function drawHand(){ var myDate = new Date();
var curHour = myDate.getHours();
var curMinute = myDate.getMinutes();
var curSecond = myDate.getSeconds(); //绘制时针
curHour = curHour>12?curHour-12:curHour;
var hourRadian = (curHour+curMinute/60+curSecond/3600) * (Math.PI/6);
//绘制分针
var minuteRadian = (curMinute+curSecond/60) * (Math.PI/30);
//绘制秒针
var secondRadian = curSecond * (Math.PI/30); function run(radian,width,color){
ctx.save();
ctx.translate(point.x,point.y);
ctx.rotate(-Math.PI/2);
ctx.strokeStyle=color
ctx.beginPath();
ctx.rotate(radian);
ctx.moveTo(0,0);
ctx.lineTo(width,0);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
run(hourRadian,hourHandWidth,"black");
run(minuteRadian,minuteHandWidth,"green");
run(secondRadian,secondHandWidth,"red"); }
//drawHand();
function drawAll(){
me.Clear();
drawCircle();
drawScale();
drawHand();
}
setInterval(drawAll,1000); } }; Canvas.CreateClock(290,20,200); </script>
</body>
</html>