Javascript 使画布左右均匀加宽

我有一个画布，在操作浏览器窗口时，它总是扩展到屏幕宽度的100%。我需要画布中心在浏览器窗口的中心始终可见。问题是，当我将画布扩展100像素时，它会向右扩展。我能不能锚定这块画布，使它左右均匀地加宽

---

您可以将画布的显示更改为

块

并自动设置边距

范例

const canvas=document.querySelector（“canvas”）；
const context=canvas.getContext（“2d”）；
canvas.width=window.innerWidth/2；
canvas.height=window.innerHeight/2；
context.fillStyle=“黑色”；
context.fillRect（0,0，canvas.width，canvas.height）；
window.addEventListener（“调整大小”，（）=>{
canvas.width=window.innerWidth/2；
canvas.height=window.innerHeight/2；
context.fillStyle=“黑色”；
context.fillRect（0,0，canvas.width，canvas.height）；
})

html，
身体{
宽度：100%；
}
#帆布{
显示：块；
保证金：自动；
}

---

您可以将画布的显示更改为

块

并自动设置边距

范例

const canvas=document.querySelector（“canvas”）；
const context=canvas.getContext（“2d”）；
canvas.width=window.innerWidth/2；
canvas.height=window.innerHeight/2；
context.fillStyle=“黑色”；
context.fillRect（0,0，canvas.width，canvas.height）；
window.addEventListener（“调整大小”，（）=>{
canvas.width=window.innerWidth/2；
canvas.height=window.innerHeight/2；
context.fillStyle=“黑色”；
context.fillRect（0,0，canvas.width，canvas.height）；
})

html，
身体{
宽度：100%；
}
#帆布{
显示：块；
保证金：自动；
}

---

请包括您现在如何定位请包括您现在如何定位我需要画布始终具有100%的浏览器窗口宽度和高度。我的意思是，当你缩小窗口时，你总是可以看到画布的中心，而不必重新计算画布坐标。要做到这一点，画布的每一面都必须有规则地放大，目前它只向右侧放大。我需要画布始终具有浏览器窗口的100%宽度和高度。我的意思是，当你缩小窗口时，你总是可以看到画布的中心，而不必重新计算画布坐标。要做到这一点，画布的每一面都必须有规则地放大，此时它只会向右放大