更改 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;
}

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

我已经尝试过这样做：

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

但画布现在真的很小。

Answer 1

所有 CSS 尺寸 requires an unit specified if a non-zero value 已给出：

长度值的格式（在此表示为 规范）是（带或不带小数点） 紧随其后的是单位标识符（例如 px、em 等）。后 长度为零，单位标识符是可选的。

所以只需在数字后面添加一个单位，这里将其作为字符串：

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

或动态：

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

var ctx = c.getContext("2d");

c.width = 40;
c.height = 12;
c.style.width = (c.width * 8) + "px";
c.style.height = (c.height * 8) + "px";

ctx.lineWidth = 2;
ctx.strokeRect(0,0,c.width,c.height);

<canvas id=c></canvas>

Answer 2

如果您想缩放页面的整个内容，请尝试将其添加到您的 html 元素的 CSS 中，或者只是整个正文：

* {
transform: scale(1.5);
}

jQuery 也可以：

$(this).css({
    '-webkit-transform': 'scale(1.5)',
    '-o-transform': 'scale(1.5)',
    '-moz-transform': 'scale(1.5)',
    '-ms-transform': 'scale(1.5)',
    'transform': 'scale(1.5)'
});

我希望这会有所帮助。

http://codepen.io/jiemushi/pen/Vjjgaj