Javascript 固定字体大小的html画布，如何在放大/缩小时进行更改

我以前用html画布制作过笛卡尔坐标系。一位用户帮助我使用鼠标添加缩放功能

但我有一个问题。轴号的字体大小是固定的，因此在缩小时，字体大小也会变小

我想要一个固定的字体大小，但数字之间的间隔是可变的

例如，如果放大，可以看到x轴上的数字0、1、2、3、4、5

但一旦你缩小它应该是0，5，10，15

像geogebra

我需要建立自己的坐标系，不能在项目中使用小程序或嵌入代码

密码是我到现在为止所掌握的

类视口{
构造器（画布）{
this.canvas=canvas
/**
*用于计算上每个点位置变化的点
*视图端口缩放和平移后的画布
*/
this.center=this.basicCenter
this.zoom=1
this.shouldPan=false
this.prevZoomingPoint=null
}
获取画布宽度（）{
返回此.canvas.getBoundingClientRect（）.width
}
获取画布高度（）{
返回此.canvas.getBoundingClientRect（）.height
}
左拉票{
返回此.canvas.getBoundingClientRect（）.left
}
获取canvasTop（）{
返回此.canvas.getBoundingClientRect（）.top
}
获取上下文（）{
返回此.canvas.getContext（'2d'）
}
获取基本中心（）{
const{canvasWidth，canvasHeight}=this
常数点={
x:画布宽度/2，
y:画布高度/2
}
返回点
}
获取基本宽度（）{
const width=this.canvasWidth
返回宽度
}
获得基本权利{
const height=this.canvashight
返回高度
}
获取宽度（）{
const{basicWidth，zoom}=这个
常量宽度=基本宽度*缩放
返回宽度
}
获取高度（）{
const{basicHeight，zoom}=这个
常量高度=基本灯光*缩放
返回高度
}
获取运动（）{
const{width，height，basicWidth，basicHeight}=this
常数{x:cx，y:cy}=this.center
常量{x:basicCX，y:basicCY}=this.basicCenter
常数deltaX=cx-basicCX-（（宽度-basicWidth）/2）
常数deltaY=cy-basicCY-（（高度-基本光）/2）
常数res={
x:deltaX，
y:德尔泰酒店
}
返回res
}
拿盘（）{
const{center，zoom，basicCenter}=这个
常数res={
x:center.x-basicCenter.x，
y：中心。y-基本中心。y
}
返回res
}
缩放（中心，三角缩放）{
const prevZoom=this.zoom
this.zoom=this.zoom+deltaZoom
this.center=this.zoomPoint（中心，this.zoom/prevZoom，this.center）
}
缩放（点）{
此.zoomBy（点，0.1）
}
zoomOut（点）{
this.zoom>0.25&&this.zoomBy（点，-0.1）
}
缩放点（中心、速率、点）{
常数{x:cx，y:cy}=中心
常数{x，y}=点
常数deltaX=（x-cx）*费率
恒河三角洲=（y-cy）*费率
常数newPoint={
x:cx+deltaX，
y:cy+deltaY
}
返回新点
}
潘比（德尔塔克斯、德尔泰）{
常量{x:centerX，y:centerY}=this.center
此.center={
x:centerX+deltaX，
y:centerY+deltaY
}
}
getDeltaPointToPrevPanningPoint（点）{
常数{x，y}=点
常量{x:prevX，y:prevY}=this.prevZoomingPoint
常数deltaPoint={
x:x-prevX，
y:y-prevY
}
返回三角点
}
startPan（活动）{
常数点={
x:event.x-this.canvasLeft，
y:event.y-this.canvasTop，
}
this.shouldPan=true
this.prevZoomingPoint=点
}
平移（事件）{
常数点={
x:event.x-this.canvasLeft，
y:event.y-this.canvasTop，
}
const deltaX=this.getDeltaPointToPrevPanningPoint（point）.x
const deltaY=this.getDeltaPointToPrevPanningPoint（point）.y
this.prevZoomingPoint=点
这是潘比（德尔塔克斯，德尔泰）
}
斯托潘（）{
this.shouldPan=false
}
转换初始（点）{
常数{x，y}=点
常量{移动，缩放}=此
常数res={
x:（x-movement.x）/zoom，
y:（y-移动.y）/缩放
}
返回res
}
变换（点）{
常数{x，y}=点
常量{移动，缩放}=此
常数res={
x:x*缩放+移动。x，
y:y*缩放+移动。y
}
返回res
}
clearCanvas（）{
this.context.setTransform（1,0,0,1,0,0）
this.context.clearRect(
0,
0,
viewPort.canvasWidth，
viewPort.canvashheight
)
}
}
课堂互动{
建造师({
帆布，
视口，
拖拉机
}) {
canvas.removeEventListener（“鼠标滚轮”，鼠标滚轮Listener）
canvas.addEventListener（“鼠标滚轮”，鼠标滚轮Listener）
canvas.removeEventListener（“mousedown”，mousedownlister）
canvas.addEventListener（“mousedown”，mousedownlister）
canvas.removeEventListener（“mousemove”，mousemoveListener）
canvas.addEventListener（“mousemove”，mousemovelListener）
canvas.removeEventListener（“mouseup”，mouseupListener）
canvas.addEventListener（“mouseup”，mouseupListener）
函数mousewheelListener（事件）{
event.preventDefault（）
常数点={
x:event.x-canvas.getBoundingClientRect（）.left，
y:event.y-canvas.getBoundingClientRect（）.top，
}
const{deltaX，deltaY}=event
if（isDecreating（））{
视口。缩放（点）
}
如果（IsIncreming（））{
viewPort.zoomOut（点）
}
函数正在增加（）{
常数res=deltaX>0|
ctx.font = 12 / zoom + "px Arial";

const orderMagnitude = Math.pow(10,Math.floor(Math.log(zoom) / Math.LN10));

const every = 1 / Math.pow(10,orderMagnitude);

const inverval = 20 * every;  // scale the interval to reflect the density of ticks

 for (let i = 1; i <= width / 2 / interval; i++) {
    total = i * interval
    ctx.fillText(` ${i*every} `, basicCenter.x + total, basicHeight / 2)
  }