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