这两天在看HTML5的标签，看到 Canvas 标签，非常的强大，可以绘制各种图形，只要你想得到都能画。 于是乎就是想着自己做一个网页上的时钟，一可以练习熟悉下Canvas 标签，何乐不为呢，说干就干。
我们先看下最终效果：
由于对Canvas标签不了解，我参考了国外的一个帖子，现在一步一步的来做；
先下载一个背景图片，这里我帖上一张；
创建一个这样的HTML文档
Canvas Clock
上面代码包括一个canvas 标签和脚本标签，里面并没有实质的内容。接下来我们开始写脚本代码;我们要先把背景图片添加到canvas中去,我们先初始化canvas,并定义一个图像对像.代码如下,
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var clockImage = new Image();
clockImage.src = 'images/Clock_Face_2_by_AGF82.png';
创建一个方法，把图像添加到Canvas中去，并给程序添加一个入口，代码：
function addBackgroundImage(){
context.drawImage(clockImage, 0,0,canvas.width, canvas.height);
}
function createClock(){
addBackgroundImage();
}
function createClock(){
addBackgroundImage();
}
function clockApp(){
if(!clockImageLoaded){
setTimeout('clockApp()', 100);
return;
}
createClock();
}
clockApp();
接下来我们创建一个画表针的方法,见代码:
function drawHourHand(){
}
我们来练习下，先在Canvas中画一条直线，见代码：
context.strokeStyle = 'red'; context.beginPath(); context.moveTo(100,10); context.lineTo(100,150); context.stroke();
知道怎么使用Canvas中画画线，我们现在尝试着画个表针
function drawHand(size){
context.beginPath();
context.moveTo(0,0); // center
context.lineTo(-4, -10);
context.lineTo(0, size * -1);
context.lineTo(4,-10);
context.lineTo(0,0);
context.fill();
}
越写越罗嗦了，我还是帖上完整的代码，代码中有注释，非常好理解，^_^ ,完整代码如下：
canvas clock Canvas
另外提供一个漂亮的带闹钟的时钟源码，有兴趣的可以研究下。效果见下图：
源码下载： https://pan.baidu.com/s/1nvaXNF7 密码: kg8w
