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

我以前用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画布。

演示文件