更改HTML画布的分辨率

Question

我正在尝试更改HTML画布的分辨率。（不是宽度和高度）。画布应保持与屏幕相同的宽度和高度，但渲染分辨率应可更改。我可以通过使用浏览器中的缩放功能来复制所需的内容，但是我想知道是否有编程方式可以做到这一点。这是我尝试过的：

function resize() {
    screenWidth = mathRound(window.innerWidth);
    screenHeight = mathRound(window.innerHeight);
    calculateUIScale();
    var scaleFillNative = Math.max(screenWidth / maxScreenWidth, screenHeight / maxScreenHeight);
    c.width = screenWidth;
    c.height = screenHeight;
    graph.setTransform(scaleFillNative, 0, 0, scaleFillNative, ((screenWidth - (maxScreenWidth * scaleFillNative)) / 2), ((screenHeight - (maxScreenHeight * scaleFillNative)) / 2));
    graph.imageSmoothingEnabled = false;
    graph.webkitImageSmoothingEnabled = false;
    graph.mozImageSmoothingEnabled = false;
}

这使画布适合屏幕。我想知道您是否可以以某种方式缩放canvas元素以模拟不同的分辨率。

我试图做到这一点：

c.width = 40;
c.style.width = 400;

但是画布现在真的很小。

Answer 1

如果给出非零值，则所有 CSS 大小都需要指定单位：

长度值（在本规范中用 表示）的格式是a（带或不带小数点），紧接着是单位标识符（例如，px、em 等）。在零长度之后，单元标识符是可选的。

因此，只需在数字后面添加一个单位，这里将其视为字符串：

c.width = 40;
c.style.width = "400px";  // add pixel unit

或者动态地：

c.style.width = (c.width * 10) + "px";

c.width = 40;
c.style.width = "400px";  // add pixel unit

c.style.width = (c.width * 10) + "px";