炫意html5
最早CSS3和HTML5移动技术网站之一

用HTML5画布实现一个会走动的时钟

我以前用Flex实现了一个能走动的时钟,但Adobe丢弃了Flex后,我决定用HTML5的画布(canvas)功能重新做出效果一样的时钟。下面是它的效果图:

HTML5画布时钟

实现它并不是很复杂,你在下面可以看到完整的源代码。代码总是无聊的,但这些中有趣的部分是如何在canvas版的时钟里使用svg路径。Flex能让你很轻松的使用svg path画出各种形状,但HTML5画布并不直接支持绘制svg路径,我只好自己写了一个方法:

function drawPath(ctx,path,fill,ang) {
ctx.save();
ctx.rotate(ang == undefined ? 0 : ang  * Math.PI / 180.0);
ctx.beginPath();
var parts = path.split(' ');
while (parts.length > 0) {
var part = parts.shift();
if (part == 'M') {
coords = parts.shift().split(',');
ctx.moveTo(coords[0], coords[1]);
} else if (part == 'L') {
continue;
} else if (part == 'Z') {
break;
} else if (part.indexOf(',') >= 0) {
coords = part.split(',');
ctx.lineTo(coords[0], coords[1]);
}
}
ctx.closePath();
ctx.fillStyle = (fill == undefined ? '#000' : fill);
ctx.fill();
ctx.restore();
}

这个drawPath()函数接受svg路径为输入参数(有一些限制,它只含有M(移动),L(连线)和Z(关闭路径)等元素),在画布上使用moveTo()和lineTo()方法来调用它们。里面没有错误检查,所以你输入的svg路径数据必须是正确无误的。

调用接口大致是这样:

drawPath(ctx, 'M 0,0 L 0,10 10,10 10,0 Z');

这样你就得到了一个10px x 10px的方块。

HTML5 canvas和Flex一样强大

毫不意外,HTML5的画布在画图形和梯度表现效果方面毫不次于Flex和SVG,但如果想使用更复杂的svg路径,你需要额外的画布工具来支持。当然,使用纯svg也能做出各种的形状,但我在这里是想试一下HTML5画布。

演示文件

clock.html

炫意HTML5 » 用HTML5画布实现一个会走动的时钟

CSS3教程HTML5教程