Javascript Can'；使用getComputedStyle函数设置画布大小

因此，问题在于

getComputedStyle

函数的工作方式非常奇怪。首先，我通过ID获取画布，比如

var canvas=document.getElementById（'canvas'）

，然后使用

getComputedStyle

函数， 并尝试设置新的宽度和高度值。但问题是它忽略了高度，只考虑宽度

JavaScript:

var newCanvas = getComputedStyle(canvas)

var width = parseInt(newCanvas.getPropertyValue('width'), 10)
var height = parseInt(newCanvas.getPropertyValue('height'), 10)

canvas.height = height
canvas.width = width

HTML:

---

当我更改高度值（在CSS文件中）时，它不会影响画布的大小。但当我改变宽度值时，宽度和高度都会改变

我不会依赖于

getComputedStyle

，因为它可能在不同浏览器之间处理不一致。相反，只需使用

canvas.offsetWidth

和

canvas.offsetHeight

还请注意，画布大小属性和画布样式之间存在区别。画布

width

和

height

命令绘图区域的大小，而样式仅更改输出的大小。如果您将画布视为一个图像（这基本上就是浏览器处理它的方式），它有宽度和高度，但您也可以使用css属性控制如何拉伸/定位画布

---

谢谢您的回复。但是

offsetWidth

和

offsetHeight

不要这样做：（我试着用鼠标在画布上画画，每次改变窗口大小时，我都用

getComputedStyle

来改变画布的大小。也许我不明白你的要求？我为你做了一个简单的选择。你听对了。还有

offsetWidth

和

OffsetWight

真的改变了画布的大小但是问题是，这种改变画布大小的方法会破坏鼠标的位置（当我点击画布开始绘制时，“绘制”的开始位置与鼠标的位置不同）。这是我的项目的关键。如果我使用

getComputedStyle

，它会起作用。问题是它只会忽略CSS中的

height

，您可以删除它，但整个过程仍然会起作用：DIt不会忽略它。因为它是一个百分比，所以高度是根据父元素的大小计算的。这对于任何HTML块级元素都是如此。由于您没有明确设置身体的大小，它只适合于内容。在样式表顶部添加

html，body{height:100%；}

。非常感谢！现在它工作得很好！您还回答了我在Stackoveflow的第一个问题，我非常感谢！

<canvas id="canvas" width="480" height="320"></canvas>

canvas {
    display: block;
    margin: 10px auto;
    border: 3px solid black;
    border-radius: 10px;
    height: 50%;
    width: 75%;
}