如何使用画布在图像上绘制叠加？

Question

我想在图像JavaScript上绘制形状（poly，rect，circle）。并且想要使用选定的形状生成热点，下面是我想要的示例链接。如何在图像上绘制覆盖画布？

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

Answer 1

我在http://jsbin.com/acuvom/5

上实现了类似的功能

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

在叠加画布上绘制将绘制一个半透明区域，允许底层图像通过。