我是使用画布元素还是仅使用普通的 div 支架来制作带有热点的交互式图像轮播/滑块？

Posted 2023-02-22

【中文标题】我是使用画布元素还是仅使用普通的 div 支架来制作带有热点的交互式图像轮播/滑块？

【英文标题】：Do I use the canvas element or just a plain div holder for an Interactive image carousel/slider with hotspots?

【发布时间】：2011-10-30 03:24:33

【问题描述】：

我需要制作一个交互式图片库（或图片滑块），其中需要放置一些热点。必须可以单击这些热点，以使用相应的信息更新侧边栏。一些基本的动画也必须可以在画廊的幻灯片或场景中使用。

哪种设置是最佳解决方案。 我目前正在考虑画布元素，但缺乏绘制热点的特定事件让我怀疑。 EaselJS 可能是一个解决方案。

另一种方法是使用常规的 javascript 图片库并在其上放置一些固定位置的热点。

这实际上是一个基本的 mvc 设置，我有图片库、热点和侧边栏。 我应该使用像http://javascriptmvc.com/ 或backbone.js 这样的javascript mvc 库

所以我的问题实际上是，考虑到性能和一些基本动画，最好的设置是什么？

谢谢。

我发现的其他有趣的链接：

http://processingjs.org http://raphaeljs.com ...

【参考方案1】：

如果您要显示大图像或希望用户使用较旧的浏览器或没有当前 GPU 加速的浏览器，那么您应该始终使用标准 html4 元素来完成此操作。使用画布是多余的，如果您没有过度使用它，会在以后给您带来痛苦。

使用基于 DOM 的图像，您已经拥有点击事件，甚至可以使用图像映射来执行点击区域。使用画布，您需要编写自己的点击检测并将鼠标位置映射到某个区域以检查点击。

总而言之，最简单的解决方案通常是最好的解决方案，而且对于性能和开发的易用性，我认为画布不是前进的方向。

【讨论】：

谢谢，项目现已完成。我确实选择了坚持使用 jquery 和一个简单的画廊。当我被允许时会在这里发布结果:)