如何将范围映射到画布作为对数标度

Question

假设我有一个 500px 宽度的画布，我想映射一个从 0.1 到 30000 的值，如下所示在 X 轴上划分。

我想使用

HTMLCanvasElement

制作这种类型的网格。不幸的是，这是搜索对数刻度时出现的第一张图像，但我无法做到这一点。

我想我需要将一个范围映射到另一个范围。 n 的 10 次方需要等间距，我可能需要嵌套 for 循环和另一个计算来制作内部网格。