之前學習了下html5中的canvas元素，為了練練手就實作了一個簡易的時鐘。時鐘本身并不複雜，也沒有使用圖檔進行美化，不過麻雀雖小五髒俱全，下面就與大家分享一下：
實作效果：
html代碼：
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>clock</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.canvas{
margin-left: 20px;
margin-top: 20px;
border: solid 1px;
</style>
</head>
<body onload= "main()">
<canvas class = "canvas" id="canvasid" width = '500px' height = '400px'></canvas>
<script type= "text/javascript" src = "clock.js"></script>
</body>
</html>
js代碼:
var canvas = {};
canvas.cxt = document.getelementbyid('canvasid').getcontext('2d');
canvas.point = function(x, y){
this.x = x;
this.y = y;
};
/*擦除canvas上的所有圖形*/
canvas.clearcxt = function(){
var me = this;
var canvas = me.cxt.canvas;
me.cxt.clearrect(0,0, canvas.offsetwidth, canvas.offsetheight);
/*時鐘*/
canvas.clock = function(){
var me = canvas,
c = me.cxt,
radius = 150, /*半徑*/
scale = 20, /*刻度長度*/
minangle = (1/30)*math.pi, /*一分鐘的弧度*/
hourangle = (1/6)*math.pi, /*一小時的弧度*/
hourhandlength = radius/2, /*時針長度*/
minhandlength = radius/3*2, /*分針長度*/
sechandlength = radius/10*9, /*秒針長度*/
center = new me.point(c.canvas.width/2, c.canvas.height/2); /*圓心*/
/*繪制圓心（表盤中心）*/
function drawcenter(){
c.save();
c.translate(center.x, center.y);
c.fillstyle = 'black';
c.beginpath();
c.arc(0, 0, radius/20, 0, 2*math.pi);
c.closepath();
c.fill();
c.stroke();
c.restore();
};
/*通過坐标變換繪制表盤*/
function drawbackground(){
c.translate(center.x, center.y); /*平移變換*/
/*繪制刻度*/
function drawscale(){
c.moveto(radius - scale, 0);
c.lineto(radius, 0);
};
c.arc(0, 0, radius, 0, 2*math.pi, true);
for (var i = 1; i <= 12; i++) {
drawscale();
c.rotate(hourangle); /*旋轉變換*/
/*繪制時間(3,6,9,12)*/
c.font = " bold 30px impack"
c.filltext("3", 110, 10);
c.filltext("6", -7, 120);
c.filltext("9", -120, 10);
c.filltext("12", -16, -100);
/*繪制時針(h: 目前時（24小時制）)*/
this.drawhourhand = function(h){
h = h === 0? 24: h;
c.rotate(3/2*math.pi);
c.rotate(h*hourangle);
c.moveto(0, 0);
c.lineto(hourhandlength, 0);
/*繪制分針（m: 目前分）*/
this.drawminhand = function(m){
m = m === 0? 60: m;
c.rotate(m*minangle);
c.lineto(minhandlength, 0);
/*繪制秒針（s：目前秒）*/
this.drawsechand = function(s){
s = s === 0? 60: s;
c.rotate(s*minangle);
c.lineto(sechandlength, 0);
/*依據本機時間繪制時鐘*/
this.drawclock = function(){
var me = this;
function draw(){
var date = new date();
canvas.clearcxt();
drawbackground();
drawcenter();
me.drawhourhand(date.gethours() + date.getminutes()/60);
me.drawminhand(date.getminutes() + date.getseconds()/60);
me.drawsechand(date.getseconds());
}
draw();
setinterval(draw, 1000);
};
var main = function(){
var clock = new canvas.clock();
clock.drawclock();
代碼中涉及到了一些簡單的canvas元素api 大家google一下即可，祝大家學習愉快:-d
來源：51cto