我以前用 Flex 实现了一个能走动的时钟, 但 Adobe 丢弃了 Flex 后, 我决定用 html5 的画布 (canvas) 功能重新做出效果一样的时钟. 下面是它的效果图:
实现它并不是很复杂, 你在下面可以看到完整的源代码. 代码总是无聊的, 但这些中有趣的部分是如何在 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
来源: http://www.webhek.com/post/html5-canvas-clock.html