javascript - 放大和缩小时，如何避免 Canvas 元素中圆形标记的填充不透明度发生不必要的变化？

我遇到填充不透明度设置的一些奇怪行为。这发生在圆形和半圆形标记上。 FillOpacity未明确设置，并且使用默认值。

我的情况如下所述（简化版本可以在following JS Bin中进行测试

我有超过100k个semiCircles，它们在canvas元素中定义，可以更快地进行渲染。

对于每个大于10的半径的缩放级别，都定义了不同的半径，以便具有可读的地图。缩放比例越高，半径越小。触发“ zoomend”事件后，将定义当前缩放并将相应的半径设置为带有以下内容的圆：

layerSites1.eachLayer(function(layer) {
    return layer.setRadius(rad1);
});

放大（通常为最大）后，当我开始缩小时，fillOpacity的密度会发生变化-会变暗。即使地图移动最小，也可以解决此问题。有时，完整的圆圈具有更暗的fillOpacity，有时只是其中的一部分。您可以在下面找到这两种情况的示例：



上面提到的JS Bin示例可以进行测试-fillOpacity的变化在红色圆圈上更明显。您需要完全放大然后再缩小，以便观察效果。如果这不是第一次发生，请再次尝试放大然后缩小。

对于我做错了什么还是浏览器渲染问题还是其他问题，我将不胜感激。我使用Chrome，Chromium，IE和Firefox对其进行了测试。

谢谢！

最佳答案

在zoomend事件和实际重画画布之间似乎存在时间问题。也许值得在GitHub上提出一个问题，但与此同时，让call stack clear并随后设置半径似乎可以解决问题：

setTimeout(function() {
    layerSites1.eachLayer(function(layer) {
        return layer.setRadius(rad1);
    });
}, 0);

这是更新的JsBin