Question

html5 怎样实现地图形状的绘制，并实现鼠标悬停放大的效果？

我知道html5有个canvas标签，但我不知道如何去做，求给个思路？

Answer 1

我觉得吧，你要先把每个地图形状都裁剪成单独的图片，然后用canvas才绘制每个图片，然后在晋城放大等操作。

追问

像这样不规则的图形如何剪裁，如何绘制呢？

追答

用 ps 剪裁，如果你熟悉canvas 那么绘图是很简单的。
如果你不会ps 我可以帮你

追问

像上面的地图该怎么用canvas绘制呢，关键还要鼠标悬停时放大和变色，点击进入链接。
我对html5的canvas只是了解，没有深入研究。可以告诉我详细的做法吗

追答

css3 可以做动画，或者 canvas是的大小也是可以设置的

Answer 2

使用悬停事件更改内容

Answer 3

canvas 也是可以放入图片的哦~~

追问

canvas怎样实现图片中的动态悬停效果呢

追答

这个效果完全可以用div来实现啊，只是可能范围不准确，div一般有效范围是矩形或者圆形。画布的话就监听鼠标在画布上的位置，然后做判断，话说这个用svg会不会更好一点呢

追问

大哥，我对html5的canvas和svg都没有深入的理解，求详细的指点

追答

那就直接用div就好了呀，只是要悬停效果而已，没有特殊要求的话就不用这样折腾了呀，而且还简洁。

追问

地图的形状都是不规则的，该怎么用div做呢

追答

我的意思是用一个png透明图层，然后矩形的作用域范围如果不是很在意的话，就可以忽略了...如果你一定要用svg的话就去看看w3c上的教程什么的就好了哈