用Canvas做的一个时钟

作者：万分之一 最后更新： 2017-05-05

这两天在看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

另外提供一个漂亮的带闹钟的时钟源码，有兴趣的可以研究下。效果见下图：