javascript - 无法使用 getComputedStyle 函数设置 Canvas 大小

Question

所以，问题是 getComputedStyle 函数的工作方式真的很奇怪。首先，我通过 ID 获取 Canvas ，例如 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:

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

CSS:

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

当我更改高度值(在 CSS 文件中)时，它不会影响 Canvas 的大小。但是当我改变宽度值时，宽度和高度都会改变。

Answer 1

我不会依赖 getComputedStyle，因为它在不同浏览器中的处理方式可能不一致。相反，只需使用 canvas.offsetWidth 和 canvas.offsetHeight。

另请注意， Canvas 大小属性和 Canvas 样式之间存在区别。 Canvas width 和 height 控制绘图区域的大小，而样式仅更改输出的大小。如果您将 Canvas 视为图像(这实际上是浏览器处理它的方式)，它有宽度和高度，但您也可以使用 css 属性控制如何拉伸(stretch)/定位它。

JSFiddle