我有一张图像（9600x7200），我在启用Google Map 的网页上用作叠加层 . 我使用latlng锚定SW和NW角，当我缩放 Map 时图像可以正确缩放 . 现在我想创建第二个叠加层，它是一个HTML5画布元素，大小也是9600x7200，位于图像的顶部 . 我可以这样做，但是当我在画布上画画时，缩放/定位都是错误的 . 我使用https://developers.google.com/maps/documentation/javascript/examples/overlay-simple作为两个叠加层的模板，它将叠加元素设置为父div的100％，这是锚定到 Map 的内容 . 这适用于 <img> ，但不适用于HTML5画布，它没有像图像那样的固有大小 . （您可以在CSS中设置宽度/高度，但底层图像具有真实尺寸，然后缩放到CSS尺寸） .
所以，我的问题是：如何创建一个9600x7200的可绘制画布大小，并将其锚定到我的 Map ，使其位置和比例与其下方的 <img> 叠加相匹配？这有代码示例吗？
1 回答
不要使用CSS来调整画布大小，通过canvas元素的width和height属性设置它 . 如果你在画布上画画（为了简单起见，它会拉伸到正常大小的两倍），它的大小和位置也会被拉伸 . 因此，如果您尝试在x：10，y：10处更改像素的颜色，则会在x：20，y：20处获得2x2（近似）的正方形 .