javascript - 如何使用 Canvas 在图像上绘制叠加层？

Question

我想在图像 JavaScript 上绘制形状(多边形、矩形、圆形)。并想使用选定的形状生成热点，下面是我想要的示例链接。以及如何在图像上绘制覆盖 Canvas ？

例如 https://google-developers.appspot.com/maps/documentation/javascript/examples/drawing-tools http://www.maschek.hu/imagemap/imgmap

Answer 1

我在 http://jsbin.com/acuvom/5 上实现了类似的东西

基本上它会在与原始图像相同宽度和高度的相同位置绘制透明 Canvas 。在我的示例中，我也将图像移动到 Canvas 中以提取图像的选定区域，但您可以省略这部分。

在叠加 Canvas 上绘图会绘制一个半透明区域，让底层图像透过。