专注网络营销推广SEM,搜索引擎优化及WordPress网站建设

用Canvas做的一个时钟

0 452

这两天在看HTML5的标签,看到 Canvas 标签,非常的强大,可以绘制各种图形,只要你想得到都能画。 于是乎就是想着自己做一个网页上的时钟,一可以练习熟悉下Canvas 标签,何乐不为呢,说干就干。

我们先看下最终效果:

Your browser does not support canvas

由于对Canvas标签不了解,我参考了国外的一个帖子,现在一步一步的来做;

先下载一个背景图片,这里我帖上一张;
Clock_Face_2_by_AGF82

创建一个这样的HTML文档



   Canvas Clock

 
   
    Your browser does not support canvas
    

上面代码包括一个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

 




 
  Your browser does not support canvas
  
Canvas

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

源码下载: https://pan.baidu.com/s/1nvaXNF7 密码: kg8w

发表评论

您的电子邮件地址将不会发布。