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

【问题标题】：Can't set canvas size with getComputedStyle function无法使用 getComputedStyle 函数设置画布大小
【发布时间】：2016-05-04 18:20:03
【问题描述】：

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

【问题讨论】：

标签： javascript css html canvas

【解决方案1】：

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

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

JSFiddle

【讨论】：

感谢您的回复。但是offsetWidth 和offsetHeight 并没有做到这一点:( 我尝试使用鼠标在画布上绘图，并且每次更改窗口大小时我都会使用getComputedStyle 来更改画布的大小。
也许我不明白您的要求？我为你做了一个fiddle。
你没听错。而offsetWidth 和offsetHeight 真正动态地改变了画布的大小。但问题是这种改变画布大小的方式会破坏鼠标位置（当我单击画布并开始绘图时，“绘图”开始位置与鼠标位置不同）。这是我的项目的fiddle。如果我使用getComputedStyle，它就可以工作。问题是它只是忽略了 CSS 中的height，你可以删除它但整个事情仍然可以工作：D
它不会忽略它。因为它是一个百分比，所以高度是根据父级的大小计算的。对于任何 HTML 块级元素都是如此。由于您没有明确设置身体的大小，它只是适合内容。在样式表顶部添加html, body { height: 100%; }。
非常感谢！现在它完美运行！您还回答了我在 Stackoveflow 上的第一个问题，非常感谢！