html5-canvas - 在选择了深色模式的设备上渲染地图

Question

我正在使用 HTML 画布 drawImage 将 OSM 地图图块渲染到网页上。但是，如果最终用户选择了暗模式，我想降低这些显示地图的亮度，但仍然让它们对用户有意义。

到目前为止，我取得了一定的成功，如下：

1. 首先使用 drawImage 绘制地图图块
2. 将 globalCompositeOperation 设置为“差异”
3. 使用相同大小的白色矩形过度绘制地图图块
4. 将 globalCompositeOperation 设置回“source-over”

但这种简单的颜色反转也许不是最好的解决方案。有没有人有任何其他的建议。

标签： html5-canvasopenstreetmapios-darkmodemacos-darkmodeandroid-darkmode

Answer 1

我找到了一个很好的解决方案，如下所示：

1. 首先将画布上下文过滤器设置为“hue-rotate(180deg)”
2. 然后使用 drawImage 在画布上绘制地图图块
3. 然后将画布上下文过滤器设置为“无”
4. 将画布上下文 globalCompositeOperation 设置为“差异”
5. 然后用相同大小的白色矩形绘制地图图块
6. 最后将画布上下文 globalCompositeOperation 设置回“source-over”