用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画布实现一个会走动的时钟”

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号