html5游戏里人物走动,用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画布。

演示文件