我有一张图像（9600x7200），正在用作启用了Google Maps的网页上的叠加层。我用latlng固定了SW和NW角，并且在缩放地图时可以正确缩放图像。现在，我想创建第二个叠加层，该叠加层是HTML5画布元素，尺寸也为9600x7200，位于图像顶部。我可以这样做，但是当我在画布上绘画时，缩放/定位都是错误的。我将https://developers.google.com/maps/documentation/javascript/examples/overlay-simple用作两个叠加层的模板，它将叠加层元素设置为父div的100％，这是固定在地图上的元素。这对于<img>效果很好，但对于HTML5画布却不能，因为HTML5画布没有图像的固有大小。 （您可以在CSS中设置宽度/高度，但是基础图像具有实际尺寸，然后可以缩放为CSS尺寸）。
因此，我的问题是：如何创建9600x7200的可绘制画布大小，并将其锚定到我的地图上，以便其位置和缩放比例以匹配其下的<img>叠加层？是否有任何代码示例？
最佳答案
不要使用CSS来调整画布的大小，而是通过canvas元素的width和height属性进行设置。如果您在画布上绘画（为简单起见，它被拉伸到正常大小的两倍），那么它的大小和位置也会被拉伸。因此，如果您尝试更改x：10，y：10处像素的颜色，则会在x：20，y：20处获得2x2（大约）的正方形。
关于javascript - 可缩放 Canvas 作为Google Maps Javascript API中的叠加层，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29394998/