带动画的马赛克几何菜单答案

【问题标题】：Mosaic geometric menu with animation带动画的马赛克几何菜单
【发布时间】：2017-08-30 02:14:38
【问题描述】：

我尝试渲染这个： sketch

PS：如果可能的话，我想为悬停时的边框设置动画

我不知道该怎么做，我试过了：

clip-path: polygon(0 0, 100% 0, 92% 86%, 6% 100%);

但如您所见，形状超出了 div 框的限制。

这是我的尝试：https://petitmaraichage.fr/

我想到了 SVG，但菜单内容是动态的，因此可以更改文本...

如果有人有想法:)

谢谢

【问题讨论】：

标签： javascript jquery html css svg

【解决方案1】：

我知道我要说的话会伤人，但我怀疑你所使用的方法会引导你走向成功。我认为您需要执行以下步骤才能取得胜利：

使用画布
使用图片中的点和线确定所需的多边形和线。
根据您在第 2 点描述的计划在画布上绘制内容，但不要忘记也具有悬停状态
为画布创建 mousemove 和 click Javascript 事件

canvas.addEventListener('mousemove', function(e) {
    //Here comes your logic, the coordinates are e.clientX and e.clientY
});

canvas.addEventListener('click', function(e) {
    //Here comes your logic, the coordinates are e.clientX and e.clientY
});

【讨论】：

您好，感谢您的帮助！这是否意味着文本将被绘制并且链接将被添加到 javascript 中？
是的，你可以画文字，例子在这里：w3schools.com/graphics/canvas_text.asp，但我认为没有必要，因为你可以在绝对位置上添加链接。