Javascript 在开发工具中更改设备类型时画布正在拉伸

我的下一张画布上有一些内容：

类的预期寿命{
构造函数（）{
//可能的最大寿命
此参数的最大使用寿命为125
//预期寿命块
this.expLsBlock=document.getElementById（“预期寿命块”）
//设置块的样式
this.style=this.expLsBlock.style
this.style.padding=“20px”
this.style.display=“flex”
this.style.width=“320px”
this.style.height=“406px”
this.style.borderRadius=“20px”
this.style.backgroundColor=“白色”
//设置画布样式
this.can=this.initCanvas（“预期寿命块”）
this.can.style.backgroundColor=“白色”；
//-40是填充物
this.can.style.width=this.expLsBlock.outerWidth-40+“px”
this.can.style.height=this.expLsBlock.outerHeight-40+“px”
this.can.style.marginLeft=“8px”
this.expLsBlock.appendChild（this.can）；
this.ctx=this.can.getContext（“2d”）
//为圆弧设置渐变
this.gradient=this.ctx.createLinearGradient（320,0,0,406）；
this.gradient.addColorStop（“0.3”和“#ABB8FF”）
this.gradient.addColorStop（“0.7”，“ABF0FF”）
}
clearCanvas（）{
//透明帆布
this.ctx.clearRect（0,0320406）
this.ctx.beginPath（）；
this.ctx.globalCompositeOperation=“源代码结束”；
this.ctx.globalAlpha=1；
this.ctx.closePath（）；
}
创建（年）{
//头衔
this.ctx.save（）
this.clearCanvas（）
this.ctx.fillStyle=“黑色”
this.ctx.font=“bold 18px Arial”；
本.ctx.fillText（“жжаааааааааааа
本.ctx.fillText（“Пжжжжзззж”，32,56）
这个.ctx.restore（）
//弧
this.ctx.save（）
this.ctx.fillStyle=this.gradient
this.ctx.strokeStyle=this.gradient
this.ctx.lineWidth=35
this.ctx.arc（150250125，Math.PI-（1.5*Math.PI/this.lifespanMax）*年，1.5*Math.PI）
this.ctx.font=“bold 55px Arial”
变量x=120
如果（年数>=100）{x=105}
this.ctx.fillText（年份，x245）
this.ctx.font=“bold 36px Arial”
这个.ctx.fillText（“цц”，120285）
this.ctx.stroke（）
这个.ctx.restore（）
}
刷新（年）{
这个。创建（年）
}
initCanvas（blockForCanvas）{
//创建高dpi画布并将其放入块中
//返回像素比
var getRatio=函数（）{
var ctx=document.createElement（“canvas”）.getContext（“2d”）；
var dpr=window.devicePixelRatio | | 1；
var bsr=
ctx.WebKitBackingsStorePixelRatio||
ctx.MozBackingsStorePixelRatio||
ctx.msBackingStorePixelRatio||
ctx.ObackStorePixelRatio||
ctx.BackingsStorePixelRatio||
1.
返回dpr/bsr；
};
//返回每英寸画布的高点
var createHiDPICanvas=函数（w，h）{
var ratio=getRatio（）；
var chart_container=document.getElementById（blockForCanvas）；
var can=document.createElement（“画布”）；
can.style.backgroundColor=“白色”；
罐宽=320*比；
罐高=406*比；
can.style.width=w+“px”；
can.style.height=h+“px”；
can.getContext（“2d”）.setTransform（比率，0，0，比率，0，0）；
图表\u容器。附加子对象（can）；
还可以；
}
var canvas=createHiDPICanvas（this.scaleWidth，this.scaleHeight）
返回画布
}
}
var expressround=新的预期寿命（）
expLsRound.create（95）

正文{
背景颜色：灰色；
}

---

如果innerCanvas功能正常，并且不再拉伸，则只需替换掉2个功能