Question

所以，问题是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：

<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文件中）时，它不会影响画布的大小。但是当我改变宽度值时，宽度和高度都会改变。

Answer 1

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

另请注意，画布大小属性和画布样式之间存在区别。画布width和height命令绘制区域有多大，而样式只是改变输出的大小。如果您将画布视为图像（基本上是浏览器如何处理它），它具有宽度和高度，但您也可以控制如何使用css属性拉伸/定位它。

JSFiddle

无法使用getComputedStyle函数设置画布大小

1 个答案: